53

我正在使用数据表在表中显示服务器端数据。

不过，我无法定位和设置单个单元格 ( <TD>) 的样式。我搜索了一下，发现可能有：

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

...但我不太确定怎么做，因为我有几张桌子，而且并非所有桌子都有相同数量的列和行。我想为所有TDs“列”提供通用类。

4

5 回答 5

49

您可以sClass在列定义中使用参数。例如，如果您有 3 列并且想要为第二列和第三列传递自定义类，您可以：

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

您可以查看数据表文档

于 2013-04-03T07:47:54.340 回答
18

您可以使用columnDefs为每列定义类。

咖啡脚本中的示例：

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

这是使用新的 API 1.10+。

于 2015-04-25T10:41:11.950 回答
13

对于那些在搜索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);
      }
    }
  }
});

希望这可能对未来的访客有用:-)

于 2014-01-08T10:08:10.247 回答
11

以下是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;
            }
        }
    }
],
于 2017-03-07T17:39:23.447 回答
9

如果要在回调中定位行或单个单元格：

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”参数工作，所以必须通过行来完成。

于 2016-09-23T16:45:10.417 回答