Question

我没想成功地突出显示添加到数据表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);

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

Answer 1

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

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

1 个答案: