基于jquery数据表中的内容突出显示特定的行

Highlight specific row base on content in jquery datatables

本文关键字:显示 jquery 数据表 基于      更新时间:2023-09-26

我使用的是jquery datatables.net,我有一个包含信息的表。在这一列中,我有true或false值来判断用户是否处于活动状态。我试图得到它,所以当值为false时,突出显示该值。现在我的表格设置代码如下:

        //Settings for datatable
        $('#userTable').DataTable({
            "jQueryUI": true,
            "serverSide": true,
            "ajax": {
                "type": "POST",
                url: "/Management/StaffGet",
                "contentType": 'application/json; charset=utf-8',
                'data': function (data) { console.log(data); return data = JSON.stringify(data); }
            },
            "columns": [
                { "data": "employeeNumber" },
                { "data": "firstName" },
                { "data": "lastName" },
                { "data": "role" },
                {
                    "data": "active",
                },
                {
                    "data": "employeeNumber",
                    "render": function (data, type, full, meta)
                    {
                        return '<a href="/Management/Edit/' + data + '">Edit </a> &#124; <a href="/Management/Delete/' + data + '">Delete </a>';
                    }
                }
            ],
            "order": [[ 0, "asc"]],
            "paging": true,
            "deferRender": true,
            "processing": true,
            "stateSave": false,
            "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
            "pageLength": 10,
            "pagingType": "simple_numbers",
            "searching": false,
            "createdRow": function ( row, data, index ) {
                if (data[4] == "false" ) {
                    $('td', row).eq(5).addClass('highlight');
                       }
                 }
        });`

那么我的css代码是:

`<style type="text/css">
      td.highlight {
      font-weight: bold;
      color: red;
     }
</style>`

我觉得专栏上的设置有问题,任何帮助都将不胜感激。

尝试

$('#userTable').DataTable({
...
"createdRow": function( row, data, dataIndex ) {
    //console.log(data[4]);
    if ( data[4] == "false" ) {
            //console.log($(row).find("td").eq(4).html());
            $(row).find("td").eq(4).addClass( 'highlight' );
    }},
...

注释的日志语句在其中,用于检查您是否获取并比较了正确的数据。

使用数据表1.10.1测试