Когда строка создается, я хотел бы добавить дочернюю строку, содержащую <table>, для последующего заполнения с помощью on.click() + DataTable() + ajax. Довольно просто. Обратный вызов createdRow() кажется отличным местом для этого ... если бы я мог заставить его работать.

createdRow() принимает 4 параметра, которые выглядят следующим образом.

  • row - HTML-элемент созданной строки
  • data - простой старый JSON данных новой строки
  • dataIndex - номер строки в своей таблице
  • cells - элементы DOM для <td>, составляющих строку

Ни один из них не является DataTables или дочерними объектами. Более того, у меня, кажется, нет способа добраться до базового элемента <table>. Ни $(row).closest('table'), ни $(cells[0]).closest('table'), похоже, ничего не возвращают, и $(row).parent() тоже не работает. Кажется, что строка еще не вставлена ​​в таблицу.

Если строка действительно не была вставлена ​​в таблицу при вызове createdRow(), то, думаю, мне просто нужно использовать другой обратный вызов, например initComplete(), и перебирать строки. Но createdRow() было бы идеально, так как все данные прямо здесь, в аргументах, поэтому я надеюсь, что мне просто не хватает чего-то простого, и createdRow() можно заставить работать.

Благодарность!

3
Bean Taxi 5 Мар 2021 в 19:00

1 ответ

Лучший ответ

Вы можете получить доступ к объекту API таблицы из самой таблицы, используя один из подходов, показанных здесь. Так, например,

$('#your_table_id_here').DataTable()

С его помощью вы можете сделать следующее, чтобы создать дочернюю строку:

$('#example').DataTable( {
  "createdRow": function( row, data, dataIndex, cells ) {
    var myTable = $('#example').DataTable();
    myTable.row( dataIndex ).child( '<table><tr><td>some data</td></tr></table>' ).show();
  }
} );

Это в основном использует вызов API row() с номером индекса строки для получения строки как объекта DataTables (вместо элемента <tr>).


Если вы добавляете новую строку через DataTables API с помощью row.add(), то вы можете использовать объект строки, который возвращается из этой функции, без необходимости создавать новый экземпляр DataTable API:

var row = table.row.add( ['John Doe', 'more info', ...] ).draw();
row.child( '<table><tr><td>some data</td></tr></table>' ).show();

В приведенном выше примере предполагается, что table - это переменная, назначенная вашему DataTable при создании DataTable:

var table = $('#example').DataTable( {
   // your usual DataTable options here
} );

Добавление дочернего элемента к строке обычно выполняется, когда таблица изначально отображается без использования вариант createdRow. Я думаю, что это самый простой способ справиться с такими вещами, как кнопки открытия / закрытия (если вы этого хотите).


Обновление относительно комментария об отсутствии доступа к идентификатору таблицы HTML.

Внутри функции обратного вызова createdRow вы также можете использовать this в качестве селектора: var myTable = $( this ).DataTable();. В этом случае нет необходимости знать идентификатор таблицы.

Используя это, мой предыдущий пример становится следующим:

$('#example').DataTable( {
  "createdRow": function( row, data, dataIndex, cells ) {
    var myTable = $( this ).DataTable();
    myTable.row( dataIndex ).child( '<table><tr><td>some data</td></tr></table>' ).show();
  }
} );
3
andrewjames 5 Мар 2021 в 21:23