Question

所以我试图使用数据id向列添加一个类。像这样的东西

{ data: 'id' },
{ data: 'Store' },
{ data: 'test','sClass':{ data: 'id' }, },

使用Datatables。实现这一目标的最佳方法是什么？

Answer 1

无论何时创建TR元素，都可以使用createdRow属性来定义回调。

var table_data = [
    { "id": 1, "Store": 2, "test": 3 },
    { "id": 4, "Store": 5, "test": 6 }
];

$('#example').dataTable( {
    "data": table_data,
    "columns" : [
      { "data": "id" },
      { "data": "Store" },
      { "data": "test" }
    ],
    "createdRow": function( row, data, dataIndex ){
        $('td', row).eq(2).addClass('id-' + data['id']);
    }
});

代码$('td', row).eq(2)用于选择表行中的第三个单元格，使用从零开始的索引（2表示第三个单元格）。代码addClass('id-' + data['id'])会将该单元格class属性设置为id-X，其中X是数据集中id字段的值。由于类名不能以数字开头，因此您需要具有以字母开头的前缀（例如，'id-'）。

请参阅this JSFiddle或Row created callback example进行演示。

Answer 2

您可以通过＆＃34; fnRowCallback＆＃34;添加行来进行操作。

$("#your-id").dataTable({
    "data": data,
    "columns": colModel,
    "fnRowCallback": function(nRow, aData) {
        $(nRow).attr('data-user-id', aData.UserId); // nRow is a <tr> DOM
        if (aData.isColored) $(nRow).addClass('colored-row'); // aData is a data row
    }
});

然后你会有这样的事情：

// ...
<tr class='colored-row' data-user-id="1">
   <td>1</td>
   <td>True</td>
   <td>John</td>
</tr>
<tr data-user-id="2">
   <td>2</td>
   <td>False</td>
   <td>Mike</td>
</tr>
// ...

当然，您可以添加任何其他类，属性，样式等这取决于您的网站需求：）

对于每一行，如何使用Datatables基于特定列的值添加类名

2 个答案: