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 訪問數據源，將獲得數據和原來數據進行對比，而後進行單元格更新。

 

測試效果圖：