对于每一行，如何使用数据表根据特定列上的值在 <th> 上添加 class 名称

Question

所以我尝试使用数据 ID 将 class 添加到列中。像这样

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

使用数据表。实现此目标的最佳方法是什么？

Answer 1

您可以通过 "fnRowCallback" 添加行进行操作。

$("#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>
// ...

当然，您可以添加任何其他类、属性、样式等
这取决于您的网站需要:)

Answer 2

您可以使用 createdRow 属性定义每当创建 TR 元素时的回调。

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) 用于 select 行中的第三个单元格，使用从零开始的索引（2 用于第三个单元格）。代码 addClass('id-' + data['id']) 会将单元格 class 属性设置为 id-X，其中 X 是数据集中 id 字段的值。由于 class 名称不能以数字开头，因此您需要有一个以字母开头的前缀（例如，'id-'）。

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

对于每一行，如何使用数据表根据特定列上的值在 <th> 上添加 class 名称

For every row how to add a class name on the <th> based on the value on a particular column using Datatables

html

javascript

datatables