Предоставление пользовательских классов каждому TD для стиля-Datatables & jQuery
Я использую datatables для отображения данных на сервере в таблицах.
Я не могу нацелить и стиль отдельных ячеек (<TD>
) хотя. Я немного поискал и нашел, что это может быть возможно с:
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
....
}
... но я не совсем уверен, как, потому что у меня есть несколько таблиц и не все имеют одинаковое количество столбцов и строк. Я хочу дать общий класс всем TDs
"столбца".
6 ответов
можно использовать в определении столбцов. Например, если у вас есть 3 столбца и вы хотите передать пользовательский класс для второго и третьего столбцов, вы можете:
"aoColumns": [
null,
{ "sWidth": "95px", "sClass": "datatables_action" },
{ "sWidth": "45px", "sClass": "datatables_action" }
]
Вы можете проверить документация объекты DataTable
для тех, кто нашел этот вопрос, когда искал 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);
}
}
}
});
надеюсь, это может быть полезно для некоторых будущих посетителей : -)
можно использовать columnDefs
для определения классов для каждого столбца.
пример coffeescript:
$('table').dataTable(
columnDefs: [
{
targets: -1 # targets last column, use 0 for first column
className: 'last-column'
}
]
);
это использование нового API 1.10+.
Если вы хотите нацелить строку или отдельную ячейку в обратном вызове:
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" работать, поэтому пришлось сделать это через строку.
вот как это сделать с помощью createdCell
, используя DataTables 1.10+ синтаксис. Преимущество этого подхода заключается в том, что вы можете условно стилизовать ячейки.
"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;
}
}
}
],
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');
}
}
);