dataTable的當前頁面刷新draw操作

dataTable當前頁刷新實現

talk is cheap，let’s show the code：

var table = $('#example').DataTable();
// Sort by column 1 and then re-draw
table.draw( false );

很簡單，將false參數傳入draw方法中即可實現當前頁刷新。別問我怎麼知道的，這個問題曾經卡了我很長一段時間，直至後來想到，該框架的設計者肯定考慮到此類問題，必然也會給予解決方案，於是終於在官方文檔中找到了想要的答案。我列個擦，想了好長時間的問題，竟然就是這樣.draw(false)簡單地解決了。

• 官方文檔參考鏈接： dataTable drawAPI

當渲染表格時，想象一種場景。在table的20頁時，我們需要對錶格中的某一行數據執行一定的操作，譬如標記。標記這個操作會彈出一個模態框，操作執行完成並回到當前頁後，理想情況下，當前的這一行數據應該顯示最新更改後的數據。這是最正常不過的應用場景了。假如你用的不是框架集成的，嗯，你確實可以採取全局變量記住當前頁的請求參數，然後再發一次請求。然而，假如你用的是dataTable做的分頁實現，那麼我告訴你，你有福了！

• 先貼出代碼

var _table = $table.dataTable($.extend(true, {},
        CONSTANT.DATA_TABLES.DEFAULT_OPTION, {
            ajax: function (data, callback, settings) {//ajax配置爲function,手動調用異步查詢
                //封裝請求參數
                var param = userManage.getQueryCondition(data);
                $.ajax({
                    type: "GET",
                    url: "/markMaster/listArray",
                    cache: false,   //禁用緩存
                    data: param,    //傳入已封裝的參數
                    dataType: "json",
                    success: function (result) {
                        if (result.errorCode) {
                            alert("查詢失敗。錯誤碼：" + result.errorCode);
                            return;
                        }
                        var returnData = {};
                        returnData.draw = data.draw;
                        returnData.recordsTotal = result.total;
                        returnData.recordsFiltered = result.total;
                        returnData.data = result.pageData;
                        //調用DataTables提供的callback方法，代表數據已封裝完成並傳回DataTables進行渲染
                        //此時的數據需確保正確無誤，異常判斷應在執行此回調前自行處理完畢
                        callback(returnData);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert("查詢失敗");
                    }
                });
            },
            columns: [
                {
                    data: "id",
                    render: CONSTANT.DATA_TABLES.RENDER.ELLIPSIS
                },
                {
                    data: "mid",
                    render: CONSTANT.DATA_TABLES.RENDER.MID
                },
                {
                    data: "name",
                    render: CONSTANT.DATA_TABLES.RENDER.UNAME
                },
                {
                    data: "tag",
                    render: CONSTANT.DATA_TABLES.RENDER.TAG
                },
                {
                    data: "cooperateStatus",
                    render: CONSTANT.DATA_TABLES.RENDER.COOPERATE
                },
                {
                    data: "signStatus",
                    render: CONSTANT.DATA_TABLES.RENDER.SIGN
                },
                {
                    data: "mark",
                    render: CONSTANT.DATA_TABLES.RENDER.ELLIPSIS
                },
                {
                    data: null,
                    defaultContent: "",
                    orderable: false,
                    width: "120px"
                },
                {
                    data: null,
                    defaultContent: "",
                    orderable: false,
                    width: "120px"
                }
            ],
            "createdRow": function (row, data, index) {
                if (data.role) {
                    $(row).addClass("info");
                }
                //給當前行某列加樣式
                $('td', row).eq(3).addClass(data.status ? "text-success" : "text-error");
                //不使用render，改用jquery文檔操作呈現單元格

                var edit = '<button type="button" class="btn btn-primary btn-edit">編輯</button>';
                var $option = $('<div>'+edit+'</div>');
                var $btnData = $('<button type="button" class="btn btn-small btn-primary btn-data">數據</button>');
                $('td', row).eq(-1).append($option);
                $('td', row).eq(-2).append($btnData);
                var a = "";
            }
        })).api();

<!--組裝的查詢參數部分-->
getQueryCondition: function (data) {
        var param = {};
        //組裝排序參數
        if (data.order && data.order.length && data.order[0]) {
            switch (data.order[0].column) {
                case 1:
                    param.orderColumn = "id";
                    break;
                case 2:
                    param.orderColumn = "mid";
                    break;
                case 3:
                    param.orderColumn = "name";
                    break;
                case 4:
                    param.orderColumn = "tag";
                    break;
                case 5:
                    param.orderColumn = "cooperateStatus";
                    break;
                case 6:
                    param.orderColumn = "signStatus";
                    break;
                case 7:
                    param.orderColumn = "mark";
                    break;
                default:
                    param.orderColumn = "id";
                    break;
            }
            param.orderDir = data.order[0].dir;
        }
        //組裝查詢參數
        param.openSearch = userManage.openSearch;
        if (userManage.openSearch) {
            param.uid = $("#uid").val();
            param.nickName = $("#nickName").val();
            param.tag = $("#tag").attr('item');
        }
        //組裝分頁參數
        param.startIndex = data.start;
        param.pageSize = data.length;
        param.draw = data.draw;
        return param;
    }

顯然，請求參數是封裝在dataTable裏面的，我們要取出不難，但是想要在刷新的時候再注入就很麻煩了.當初遇到這個檻時真是百思不得解。想過幾種解放方案都被自己給否定了，直到後來。。。直接在執行完操作代碼的後面添加上_table.draw(false)，然後你就可以實現執行完操作的當前頁刷新了~喜大普奔