datatable 局部刷新之单元

▼魔方 西西 提交于 2020-02-29 13:42:21

需求:

  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 访问数据源,将得到数据和原来数据进行对比,然后进行单元格更新。

 

测试效果图:

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!