dataTable重新异步加载表格数据

如果表格的数据不是固定的,譬如需要根据时间等参数变化,那么不可避免的需要异步加载数据。
需要注意的是,dataTable表格对象不允许两次初始化,所以你不能简单粗暴的再次执行表格的构建方法,官方文档提供了相关的表格数据重新加载的方法,这里记载一下。

之前说过,dataTable数据来源可以直接对data属性赋值,或者使用ajax属性发起请求。我原本以为官方会提重置data的方法,不过在官网文档上面没有找到,到是后者,官方提供了重新加载数据的方法:[color=red]table.ajax.reload()[/color],这就意味着,如果想使用重新加载数据的功能,你的数据来源只能是ajax。

我尽量把项目里地代码拆开,使demo更加简单明了。
这里需要注意两点:一是如何获取表格对象,二是如何重写ajax函数。

获取已经初始化的表格对象并重新加载数据

var table = $('#example').DataTable();
table.ajax.reload();


在写ajax函数时,需要调用callback方法,参数就是你需要填充进表格的数据。需要注意的是这是一个对象

"ajax" : function(data, callback, settings) {
// 获取发起ajax的参数
var param = {};
param.service_code = $("#serviceSelection").val();
param.start = $("#startTime").val();
param.end = $("#endTime").val();
if ($("#callerSelection").val() != 'all')
param.caller = $("#callerSelection").val();
// 发起ajax请求,获取数据
var ajaxData = getAjax(param, "/api/hm/service/record",
false);
var data = ajaxData.data;
// 解析数据
if (ajaxData.status == 100) {
var tableData = new Array(data.records.length);
for (i = 0; i < data.records.length; i++) {
arrary = new Array(9);
arrary[0] = data.records[i].id;
arrary[1] = "<span>"+data.records[i].request+</span>";
arrary[2] = data.records[i].caller;
arrary[3] = data.records[i].status_text;
arrary[4] = data.records[i].reason;
arrary[5] = data.records[i].use_cache;
arrary[6] = data.records[i].create_time;
arrary[7] = data.records[i].invoke_time;
arrary[8] = "<button onclick='showModal("
+ data.records[i].id + ")'>查看日志</button>";
tableData[i] = arrary;
}
// 填充数据,填充表格的数据是一个对象,对象需要一个叫data的属性,这个属性对应的值,才是表格真正的数据

var requireData = {};
requireData.data = tableData;
callback(requireData);
} else {
var requireData = {};
requireData.data = [];
callback(requireData);
}
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值