为每个TD提供自定义类的样式 – Datatables＆jQuery
我正在使用数据表来显示表中的服务器端数据。
我不能定位和设置单个单元格（ <TD> ）。 我search了一下，发现它可能是有可能的：
"fnRowCallback": function( nRow, aData, iDisplayIndex ) { .... }
…但我不太清楚，因为我有几个表，并不是所有的行和列都相同。 我想给一个“专栏”的所有TDs提供一个共同课。
您可以在Columns定义中使用sClass参数。 例如，如果您有3列，并想要传递第二和第三列的自定义类，则可以：
"aoColumns": [ null, { "sWidth": "95px", "sClass": "datatables_action" }, { "sWidth": "45px", "sClass": "datatables_action" } ]
您可以检查数据表文档
对于那些在searchfnRowCallback时发现这个问题的人，并且希望添加基于单元格内容的样式而不是使用静态的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 +。
如果要在callback中定位行或单个单元格，请执行以下操作：
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; } } } ],
