突出显示数据表 ajax 源数据中的新行答案

【问题标题】：Highlighting a new row in datatable ajax sourced data突出显示数据表 ajax 源数据中的新行
【发布时间】：2016-07-16 14:21:00
【问题描述】：

我试图突出显示添加到数据表 1.10 中的新行，但未成功。

这是我的表初始化：

$('#userList').DataTable({            
        serverSide: true,
    serverMethod: "GET",
    ajaxSource: base + "admin/users/users_list/showusers",      
        order: [ 0, "desc" ],    
        aoColumns: [
            {bVisible:false},                                  
            {data: null,
            render: function (data, type, row){
            if(row[2] === '4'){
                return '<span class="text-lt">'+row[1]+'</span>';
            } else {
                return row[1];
            }   
            }
            },
            {data: null,
            render: function (data, type, row){
            if(row[2] === '1'){
                return '<span class="label label-black">'+selectUG1+'</span>';
            } 
            else if(row[2] === '2') {
                return '<span class="label label-primary">'+selectUG2+'</span>'
            }
            else if(row[2] === '3') {
                return '<span class="label label-success">'+selectUG3+'</span>'
            }
            else if(row[2] === '4') {
                return '<span class="label label-danger">'+selectUG4+'</span>'
            } 
            }
            },
            null,
            {data:4,
            render: function(data, type, row){
                return (moment(data).format("DD/MM/YYYY"));
             }
            },
            {data:5,
            render: function(data, type, row){
                return (moment(data).format(tableDateTimeFormat));
             }
            },
            {bSortable: false, className: 'all', 
            data: 6,
            render: function(data, type, full, meta){
                return '<a href="'+base+'admin/users/edit_user/userid/'+data+'" class="animsition-link table-icon" data-toggle="tooltip" data-original-title="'+tooltipEdit+'">\
                        <span class="fa-stack">\
                        <i class="fa fa-square fa-stack-2x"></i>\
                        <i class="fa fa-edit fa-stack-1x fa-inverse"></i>\
                        </span>\
                        </a>\
                        <a href="#" id="'+data+'" class="table-icon red-icon delete" data-toggle="tooltip" data-original-title="'+tooltipDelete+'">\
                        <span class="fa-stack">\
                        <i class="fa fa-square fa-stack-2x"></i>\
                        <i class="fa fa-trash fa-stack-1x fa-inverse"></i>\
                        </span>\
                        </a>';}
            }
        ]            
    });

服务器返回的数据格式如下：

["240", "fancy", "3", "fancy@fancy.com", "2016-07-16", "2016-07-16 14:09:23", "240"]

我正在使用以下方法：

setTimeout(function(){
        $.ajax({
            url: $form.attr('action'),
            type: 'POST',
            data: $form.serialize(),
            success:function(response){
                if(response.success){                       
                    usertable.rows.add([                           
                    ]).draw().nodes().to$().addClass('animated fadeIn').effect('highlight',{},3000); 
                    toastr.success(userAddSuccess)
                }                    
                $form.parents('.bootbox').modal('hide');               
            }
        });
    }, 3000);

添加的行没有想要的效果，我哪里出错了？

【问题讨论】：

该行是否获得animated fadeIn 类？
不，这个和高亮效果都不是。

标签： jquery ajax datatables

【解决方案1】：

我相信新行没有突出显示，因为您使用serverSide: true 启用了服务器端处理。在这种模式下调用draw() API 方法将触发对服务器的请求。由于插件不知道添加了哪些行，因此对 nodes() 的调用将返回 0 元素。

【讨论】：

感谢您的回复。你认为如果我尝试使用 DT_RowId 属性为每一行添加一个 id，我将能够解决维护 serverSide true 的问题吗？
@blips，有几种方法可以修复它。目前尚不清楚response 变量的值是多少，rows.add([ ]) 调用中没有数据，所以我无法提供更详细的答案。如果您知道新添加行的 ID（在您的示例中为 240），那么您可以使用 fnFindCellRowIndexes() 插件在表格页面 draw 事件上找到它并突出显示它。
感谢您的建议，现在我知道该怎么做了。