Question

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

我无法定位和设计单个单元格（<TD>）。我搜索了一下，发现可能有：

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

...但我不太确定，因为我有几张桌子而且并非所有列都有相同数量的列和行。我想为“列”的所有TDs提供公共课程。

Answer 1

您可以在列定义中使用sClass参数。例如，如果您有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

以下是使用DataTables 1.10+ syntax使用createdCell的方法。这种方法的好处是你可以有条件地设置细胞样式。

"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 5

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

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');
        }
    }
);

我无法得到“已创建的细胞”。工作的参数，所以必须通过行。

为每个TD提供定制类以进行样式设计 - Datatables＆amp; jQuery的

5 个答案: