jQuery 数据表将类添加到 tr

Question

我正在使用 jQuery 和数据表。我想将一个类添加到特定行的 TR 元素。我知道如何找到该行。

console.dir(row);

显示

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

Answer 1

$('tr', row)

正在行的上下文中寻找 tr 元素，这意味着它将在 inside 作为上下文参数提供的

row

中搜索 tr 元素。

根据API，这应该有效

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

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

Answer 3

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

如果你想在数据表中使用行添加功能时添加类，你可以从

node()

方法获取TR-DOM：

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

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

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

Answer 4

要在行上设置 Id 属性

<tr>

使用：

//.... 
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

Answer 5

您还可以通过发送到数据表的 json 数据将类添加到

tr

。每个json项都有

DT_RowClass

.
就足够了 例如：

{

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

}  

在这个例子中

DT_RowId

值适用于任何

id

标签的

tr

属性和

DT_RowAttr

值应用一些自定义属性到

tr

标签。

Answer 6

另一个解决方案：

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

Answer 7

你也可以使用 stripeClasses 选项，它用于设置奇数和偶数条纹的行类名。

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

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

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