jQuery Datatables如何向tr元素添加类？

Question

我正在使用jQuery和datatables。我想将一个特定行的TR元素添加一个类。我知道如何找到该行。console.dir(row)显示行对象，并以tr元素开头。然而，我无法让jQuery选择器起作用。我错过了什么？

table = $('#resultTable').DataTable({
    aaSorting: [],
    ajax: {...},
    columnDefs: [...],
    createdRow: function (row, data, index) {
        //
        // if the second column cell is blank apply special formatting
        //
        if (data[1] == "") {
            console.dir(row);
            $('tr', row).addClass('label-warning');
        }
    }
});

- 7 Reeds

---

你不能只是这样做 $(row).addClass('label-warning'); 吗？ - Marc

为什么不使用 $(row).addClass(...)？ 如果 row 本身就是一个 tr，则 $('tr', row)（或 $(row).find('tr')）仅会查找嵌套的 tr。 - Kenney

哈哈，我本来以为我尝试过 $(row).addClass("label-warning"); 但没有成功……现在它可以了。:-} - 7 Reeds

Answer 1

$('tr', row) 是在 row 的上下文中寻找 tr 元素，这意味着它将在提供的 context 参数 内部 搜索 tr 元素。

根据API，这应该是有效的。

$(row).addClass("label-warning");

- Ozan

---

谢谢，就像上面所说的，我认为我已经做到了，但我一定犯了其他错误。谢谢。 - 7 Reeds

Answer 2

你只需要使用 createdRow。

$('#data-table').DataTable( {
    createdRow: function( row, data, dataIndex ) {
        // Set the data-status attribute, and add a class
        $( row ).find('td:eq(0)')
            .attr('data-status', data.status ? 'locked' : 'unlocked')
            .addClass('asset-context box');
    }
} );

- Zymawy

---

如果您不想要第一个TD，只是想要在TR中添加一个类，请使用以下代码：$(row).addClass('asset-context box'); - TroySteven

Answer 3

DataTable().row.add() 的情况：

如果您想在Datatables中使用行添加功能时添加类，可以通过node()方法获取TR-DOM：

var datatable = $('#resultTable').DataTable();

var trDOM = datatable.row.add( [
    "Col-1",
    "Col-2"
] ).draw().node();

$( trDOM ).addClass('myClass');

- Nick Tsai

Answer 4

要在行 <tr> 上设置 Id 属性，请使用：

//.... 
rowId: "ShipmentId",
columns: [...],
//....

使用这个回调函数来为<tr>设置类名

createdRow: function (row, data, dataIndex) {
    $(row).addClass('some-class-name');
},

参考: https://datatables.net/reference/option/createdRow

要在<td>上设置类，请使用：

"columns": [
{ 
    data:"",
    className: "my_class",
    render: function (data, type, row) { return "..."; }
},
{ 
    data:"",
    className: "my_class",
    render: function (data, type, row) { return "..."; }
},
//...
]

'columnDefs'类似的东西

参考：https://datatables.net/reference/option/columns.className

- Adel Mourad

---

这会将其添加到 <td> 而不是 <tr>。 - ricks

有没有办法在渲染函数中根据数据更改类名？首先定义一个默认的类名，然后在渲染函数中检查数据是否无效，如果是，则更改类名。 - vsam

在这种情况下，您可以将单元格内容包装在 div 中，并在其上设置类名，而不是在单元格 - td - 本身上设置。 - Adel Mourad

Answer 5

您可以通过传递给数据表的json数据为添加类。只需每个json项目都有DT_RowClass即可。
例如:

{

    DT_RowAttr = new
    {
       attr1 = "1",
       attr2 = "2"
    }
    DT_RowClass = "majid",
    DT_RowId = "rowId"

}  

在这个例子中，DT_RowId的值应用于任何tr标记的id属性，而DT_RowAttr的值则应用于tr标记的某些自定义属性。

- Majid Basirati

Answer 6

您还可以使用stripeClasses选项，用于设置奇偶行条纹的行类名。

stripeClasses: ['odd align-middle', 'even align-middle'],

在这个例子中，我已经将Bootstrap的“align-middle”类附加到原始条纹类上，以垂直对齐每行中的文本。

参考：https://datatables.net/reference/option/stripeClasses

- Dan Greenfield

Answer 7

另一种解决方案：

createdRow: function (row,data) {
    var stsId = data.Ise_Sts_Cost_ID;
    if (stsId == 3)
        $(row).addClass('table-warning');
    else if (stsId == 4)
        $(row).addClass('table-success');
    else
        $(row).addClass('table-danger');
}

- Majid Basirati