dataTable的当前页面刷新draw操作

来源：互联网发布：算法视频教程编辑：程序博客网时间：2024/06/03 21:39

dataTable当前页刷新实现

talk is cheap，let’s show the code：

var table = $('#example').DataTable();// Sort by column 1 and then re-drawtable.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)，然后你就可以实现执行完操作的当前页刷新了~喜大普奔

2 0