对于每一行，如何使用 Datatables 根据特定列上的值在 <th> 上添加类名答案

【问题标题】：For every row how to add a class name on the <th> based on the value on a particular column using Datatables对于每一行，如何使用 Datatables 根据特定列上的值在 <th> 上添加类名
【发布时间】：2015-06-05 03:23:18
【问题描述】：

所以我正在尝试使用数据 ID 向列添加一个类。像这样的

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

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

【问题讨论】：

对不起...这里的目的是什么
我希望每一行都有一个以来自我的服务器的 data.id 命名的类，所以像这样 ...
这个真的不清楚。通过“做任何事情”，您希望它做什么？
我不知道你怎么不清楚？我解释的不是很好吗？对于每一行，我希望第三列上的类名是我第一列的值。例如，如果第一列的值为 3，我希望我的第三列类为 3，例如
你的标题说添加“类到数据表列”但你的评论说你想为每个添加一个类行。是哪一个？

标签： javascript html datatables

【解决方案1】：

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

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

【讨论】：

我的答案和这个答案有什么实际区别？我不是在争论什么的：）我只是想知道为什么我被否决了。如果我不对或使用fnRowCallback 不好，我想知道它，以便下次我不会使用它或推荐使用它。实际上，这两种解决方案的唯一区别是使用createdRow 函数而不是fnRowCallback 函数。它们都允许 DOM 操作。

【解决方案2】：

您可以通过“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>
// ...

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

【讨论】：

我要试试这个
您的回答有效。但是 fnRowCallback 回调是不推荐使用的 API，可能会在未来版本的 DataTables 中删除。将新选项（data、columns）和旧版本选项（fnRowCallback）混合使用是不好的做法。 OP还询问如何使用数据id属性将类添加到列（而不是行）。