datatable 局部刷新之单元

需求：

　　1.对某一列进行动态更新。

      2.不能对表格状态更改，如选中状态、当前页数、筛选等。

 

这样我们使用 draw 、ajax.reload 等都不能满足第二个需求。幸好发现一个api  cell().data() 可以实现上面的需求。对此进行了封装来满足需求。

 

解决：

$.fn.dataTable.Api.register( 'partUpdate', function (col) {
    var api = this;
    var Sdata = api.data().data()
    $.ajax({
        url: api.ajax.url(),
        data: api.ajax.params(),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        type: 'post',
        success: function (resp) {
            var data = resp.data;
            var error = resp.error;
            if (error!=null || error!=undefined){
                alert(error)
                return false;
            }
            var field = table.column(col).dataSrc()
            $.each(Sdata, function(index, Sitem){
                $.each(data, function(_i, item){
                    if(item!=undefined && item.id==Sitem.id){
                        if (Sitem[field]!=item[field]){
                            table.cell( index, col ).data(item[field])
                        }
                        delete data[_i]
                        return false;
                    }
                })
            })
        }
    })
} );

我们注册api partUpdate,在内部ajax 访问数据源，将得到数据和原来数据进行对比，然后进行单元格更新。

 

测试效果图：