如果表格的数据不是固定的,譬如需要根据时间等参数变化,那么不可避免的需要异步加载数据。
需要注意的是,dataTable表格对象不允许两次初始化,所以你不能简单粗暴的再次执行表格的构建方法,官方文档提供了相关的表格数据重新加载的方法,这里记载一下。
之前说过,dataTable数据来源可以直接对data属性赋值,或者使用ajax属性发起请求。我原本以为官方会提重置data的方法,不过在官网文档上面没有找到,到是后者,官方提供了重新加载数据的方法:
table.ajax.reload(),这就意味着,如果想使用重新加载数据的功能,你的数据来源只能是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);
}
}
分享到:
相关推荐
本文给大家分享的是Jquery+dataTable插件来实现异步加载数据的示例代码,非常实用,有需要的小伙伴可以参考下
private DataTable Optimization_DataTable(DataView dv) { DataTable dt = dv.Table.Clone(); if (dv.Table.Rows.Count >= 1) { for (int i = 0; i ; i++) { DataRow dr_1 = dt.NewRow(); string[] str_...
异步请求 var postData = { "env_name" : new_env_name, "env_url": new_env_url, "env_desc" : new_env_desc }; $.ajax({ type: 'POST', url : '/test_env_add/', data : postData, dataType : 'json',...
举例讲解了数据控件DataTable的数据记录操作,当还没有做datatable.acceptChangs()操作之前对数据行发生增删改时,可取得修改前后的值。具体可看文档中的距离代码。可以直接新建Windows控制项目进行代码运行。
NULL 博文链接:https://pouyang.iteye.com/blog/581021
dt.Columns["create_by"].SetOrdinal(0); dt.Columns["create_by"].ColumnName = "OP"; dt.Columns["hk_invoice"].SetOrdinal(1); dt.Columns["hk_invoice"].ColumnName = "HK10->FR10"; dt.Columns["To_end_...
用ajax实现异步刷新,一半处理程序返回datable
datatable 导出到excel 表格的dll,VS直接引入,使用前看说明,VB,C# ...都适用
将DataTable导出为Excel表格数据.。。。。。。。。。。。。。。。。。。。。。。。
winform中将Datatable数据导出到Excel表格中,该项目包含了例子,能使个人能更加了解winform将datatable数据导出到excel的整个流程,本资源也可拿来即用,只需要稍加修改即可。
对DataTable分页获取数据
分页、排序、检索 Datatable与json之间数据转换,一个详细完整的例子!,希望对大家有用。
1.节点是异步加载的(解决效率问题) 2.节点是无限级别的(递归的,这样可复用与目录结构、组织架构等数据类型) 3.节点是可以多选的(用CheckBox选择) 4.XAML方式绑定(减少UI上Code量) 5.方便得获取选中项信息
DataTable缓存数据操作 DataTable 缓存数据操作
C# 将SQLServer数据查询结果的DataTable转换成Excel表格,使用NPOI给Excel表格添加样式,发布邮件到邮箱,提醒收件人查看邮件。
适合前端初学者 jquery中的datatable使用ajax读取数据 并展示表格数据
利用jQuery Datatable和artTemplate组合来做的表格。但是当删除数据时,需要重新加载table里的数据。接下来通过本文给大家分享jQuery使用DataTable实现删除数据后重新加载功能,需要的朋友参考下
jquery 滚动加载,最简单最实用的滚动加载