Предоставление пользовательских классов для каждого TD для стилей - Datatables & jQuery

Question

Я использую datatables для отображения данных на стороне сервера в таблицах.

Я не могу настроить и настроить отдельные ячейки (<TD>). Я ищу немного, и нашел, что это может быть возможным с:

"fnRowCallback": function(nRow, aData, iDisplayIndex) { 
    .... 
} 

... но я не совсем уверен, как потому, что у меня есть несколько стола и не все имеют одинаковое количество столбцов и строк. Я хочу дать общий класс всем TDs «столбца».

Answer 1

В определении столбцов можно использовать параметр . Например, если у вас есть 3 колонки и хотите передать пользовательский класс для второй и третьей колонки, вы можете:

"aoColumns": [ 
    null, 
    { "sWidth": "95px", "sClass": "datatables_action" }, 
    { "sWidth": "45px", "sClass": "datatables_action" } 
] 

Вы можете проверить datatables documentation

Answer 2

Для тех, кто нашел этот вопрос при поиске fnRowCallback и хочешь добавить стиль, основанный на содержании клеток, а не использовать статические классы CSS, используя fnRowCallback будет делать трюк:

oTable = $('#matrix').dataTable({ 
    ... 
    "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
    for (var i in aData) { 

     // Check if a cell contains data in the following format: 
     // '[state] content' 
     if (aData[i].substring(0,1)=='[') { 

     // remove the state part from the content and use the given state as CSS class 
     var stateName= aData[i].substring(1,aData[i].indexOf(']')); 
     var content= aData[i].substring(aData[i].indexOf(']')+1); 
     $('td:eq('+i+')', nRow).html(content).addClass(stateName); 
     } 
    } 
    } 
}); 

Надеется, что это может быть полезно для некоторых будущих посетителей :-)

Answer 3

Вы можете использовать columnDefs для определения классов для каждого столбца.

Пример в CoffeeScript:

$('table').dataTable(
    columnDefs: [ 
    { 
     targets: -1 # targets last column, use 0 for first column 
     className: 'last-column' 
    } 
    ] 
); 

Это использование нового API 1.10+.

Answer 4

Если вы хотите целевой строки или отдельной ячейки в функции обратного вызова:

var table = $('#order-history-table').DataTable(
    { 
     "ajax": url, 
     "pageLength": 20, 
     "createdRow": function(row, data, dataIndex) { 

      // Add a class to the cell in the second column 
      $(row).children(':nth-child(2)').addClass('text-justify'); 

      // Add a class to the row 
      $(row).addClass('important'); 
     } 
    } 
); 

я не смог получить параметр «createdCells» работать так должен был сделать это через ряд.

Answer 5

Вот как это сделать, используя createdCell, используя DataTables 1.10+ syntax. Преимущество этого подхода состоит в том, что вы можете условно стилизовать ячейки.

"columnDefs": [ 
{ 
     "targets": [16], 
     "createdCell": function(td, cellData, rowData, row, col) { 
      switch(cellData) { 
      case "Pending": 
       $(td).addClass('pending'); 
       break; 
      case "Rejected": 
       $(td).addClass('rejected'); 
       break; 
      case "Approved": 
       $(td).addClass('approved'); 
       break; 
      case "SAP": 
       $(td).addClass('sap'); 
       break; 
      case "Reconciled": 
       $(td).addClass('reconciled'); 
       break; 
      } 
     } 
    } 
], 

Answer 6

var table = $('#order-history-table').DataTable(
    { 
     "ajax": url, 
     "pageLength": 20, 
     "createdRow": function(row, data, dataIndex) { 
      // Add a class to the cell in the second column 
      $(row).children(':nth-child(2)').addClass('text-justify'); 
      // Add a class to the row 
      $(row).addClass('important'); 
     } 
    } 
);