【问题标题】:Highlight specific row base on content in jquery datatables根据 jquery 数据表中的内容突出显示特定行
【发布时间】:2015-12-22 15:04:11
【问题描述】:

我正在使用 jquery datatables.net,并且我有一个包含信息的表。在一列中,我对用户是否处于活动状态有真值或假值。我正在尝试获取它,因此当值为 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>`

感觉栏目设置有问题,不胜感激。

【问题讨论】:

  • 当您使用浏览器检查器检查 td 时,它是否获得“highlight”类?
  • 不,它没有。它没有显示任何“亮点”实例
  • 如果你在 if 语句之前 console.log(data[4]) 会得到什么:if (data[4] == "false" ) {
  • 控制台正在读取对象未定义
  • 如果你console.log(data)怎么办?

标签: javascript jquery css datatable datatables


【解决方案1】:

试试

$('#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 测试

【讨论】:

  • 抱歉回复晚了 - 假期远离计算机 =) 在数据表 1.10 中添加了“createdRow”。有可能更新吗?
  • 我目前使用的是 2.1.4
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-12-24
  • 2015-08-04
  • 2011-12-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多