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)，然后你就可以实现执行完操作的当前页刷新了~喜大普奔

dataTable的当前页面刷新draw操作

dataTable当前页刷新实现

talk is cheap，let’s show the code：

猜你喜欢