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