我使用datatables 在表格中显示服务器端数据。
不过，我无法定位和设置单个单元格 (<TD>) 的样式。我搜索了一下，发现可能有：
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
....
}
...但我不太确定怎么做，因为我有几张表，但并非所有表的列数和行数都相同。我想为“列”的所有TDs 提供公共课程。
【问题讨论】：
标签： javascript jquery datatables html-table
您可以在列定义中使用sClass 参数。例如，如果您有 3 列并且想要为第二列和第三列传递自定义类，您可以：
"aoColumns": [
null,
{ "sWidth": "95px", "sClass": "datatables_action" },
{ "sWidth": "45px", "sClass": "datatables_action" }
]
【讨论】：
您可以使用columnDefs 为每一列定义类。
coffeescript 中的示例：
$('table').dataTable(
columnDefs: [
{
targets: -1 # targets last column, use 0 for first column
className: 'last-column'
}
]
);
这是使用新的 API 1.10+。
【讨论】：
对于那些在搜索 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);
}
}
}
});
希望这对未来的访问者有用:-)
【讨论】：
if 语句内），当前行和单元格编号用于检索单元格的 JQuery 实例并更改单元格的内容和类。您的问题可能是由于您的 CSS 代码有 tr:even td 或 tr:odd td 覆盖了样式？
$('td:eq('+i+')', nRow).parent().addClass("NAME"); ?
以下是使用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;
}
}
}
],
【讨论】：
如果您想在回调中定位行或单个单元格：
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”参数工作，所以必须通过行来完成。
【讨论】：