Как получить доступ к атрибутам элемента в конструкторе DataTables?

Question

Я определяю в своем HTML атрибут data-create-label, который я хочу использовать в опциях конструктора DataTables, чтобы установить заголовок кнопки: title: $(this).data("create-label"),.

Моя проблема в том, что $(this) относится к странице, а не к текущему $('[data-toggle="datatable"]'), к которому применяется конструктор.

Я почти уверен, что то, что я пытаюсь сделать, может сработать, но мне не хватает навыков в jQuery. Как мне добиться использования атрибута данных, определенного в HTML, в конструкторе DataTables?

<table id="MyTable" class="table table-striped" data-toggle="datatable" data-create-label="Label for my button">
  <thead>
    <tr>
      <th>Id</th>
      <th>Username</th>
      <th>Roles</th>
    </tr>
  </thead>
  <tbody>
    {% for user in users %}
      <tr>
        <td class="align-middle">{{ user.id }}</td>
        <td class="align-middle">{{ user.username }}</td>
        <td class="align-middle">
          {{ responsability is not empty ? responsability.label : '-' }}
        </td>
      </tr>
    {% endfor %}
  </tbody>
</table>

$('[data-toggle="datatable"]').DataTable({
  buttons: [{
    text: '<i class="ion-md-add"></i>',
    attr: {
      title: $(this).data("create-label"),
      id: 'createButton',
      'class': 'btn btn-primary'
    },
  },],
  dom: 'fBrtp',
});

Answer 1

Как вы видели, this не относится к элементу, для которого вы определяете экземпляр DataTable. Чтобы получить ссылку на элемент и извлечь из него атрибут data-create-label, вы можете использовать each(), например:

$('[data-toggle="datatable"]').each(function() {
  var $table = $(this);
  $table.DataTable({
    buttons: [{
      text: '<i class="ion-md-add"></i>',
      attr: {
        'title': $table.data("create-label"),
        'id': 'createButton',
        'class': 'btn btn-primary'
      },
    }],
    dom: 'fBrtp'
  });
});