如果表格的数据不是固定的,譬如需要根据时间等参数变化,那么不可避免的需要异步加载数据。
需要注意的是,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插件来实现表格数据的异步加载。 首先,我们来了解dataTable插件。dataTable是一个非常流行的jQuery插件,能够将普通的HTML表格转换成具有高级交互功能的动态表格。它支持...
UI Library 的一部分,它提供了一种强大的方式来展示和操作表格数据。jQuery form 插件则用于处理表单的异步提交,通常用于实现无刷新的数据更新。在本文中,我们将深入探讨这两个库如何结合使用,以及如何实现数据...
接下来,我们将深入了解如何通过Bootstrap和jQuery dataTable组件实现表格数据的异步刷新。 首先,Bootstrap框架提供了一套美观且响应式的界面组件,其中包括了用于展示表格数据的dataTable插件。这个插件具备排序...
### 对DataTable进行分页获取数据的方法解析 ...在实际项目开发过程中,可以根据具体需求进一步优化和完善这一方法,例如加入缓存机制或异步加载等高级特性,从而更好地满足复杂场景下的性能需求。
6. **Ajax**: AJAX (Asynchronous JavaScript and XML) 是一种在无需重新加载整个网页的情况下更新部分网页内容的技术。在这个场景中,Ajax用于异步地从服务器获取JSON数据,避免了页面刷新,提高了交互性。...
总的来说,jQuery插件DataTable是现代Web应用中处理和展示表格数据的强大工具。其丰富的功能、强大的API和良好的社区支持,使其成为许多开发者的首选。在使用最新版本时,开发者应充分利用其提供的各项功能,同时...
Datatable 是一个广泛用于Web开发的数据展示库,尤其在JavaScript环境中,它提供了丰富的功能来处理和展示表格数据。这个压缩包可能包含了相关的HTML、CSS、JavaScript文件以及示例代码,帮助开发者理解和应用...
这种技术利用了Ajax(Asynchronous JavaScript and XML)的优势,可以在不重新加载整个页面的情况下,从服务器获取并更新部分网页内容。本文将详细讲解如何在JSP中运用Ajax实现这一功能。 首先,理解基础概念: 1. ...
在这个项目中,jQuery被用来增强用户界面的交互性,如表格数据的动态加载、增删改查操作的异步提交等。 5. **Bootstrap**:Bootstrap是Twitter开源的一个前端框架,提供了一套响应式布局、移动设备优先的Web开发...
2. **Ajax技术**:在前端,`dataTable`使用Ajax异步通信来获取服务器上的数据,这样可以在不刷新整个页面的情况下更新表格内容。这提高了用户体验,因为用户可以实时查看和操作数据,而无需等待整个页面重新加载。 ...
在加载数据时,我们使用了 DataTable 对象来存储数据,然后将其绑定到 DataGrid 控件上。 结论 在本文中,我们讨论了 DataGridView 控件的操作,特别是解决 DataGridView 加载慢的问题。我们使用 DataGrid 控件...
jQuery DataTable插件因其强大的功能和灵活性,在Web开发中被广泛应用于表格数据的展示与管理。本文将详细介绍在使用jQuery DataTable处理大数据时,四种不同的数据来源及其对应的分页解决方案。 #### 二、数据来源...
它提供了一种方便的方式来呈现表格数据,并支持排序、分页和编辑等操作。 Ajax4jsf 提供了一个名为 `<a4j:commandButton>` 的组件,它可以触发异步请求,更新页面的部分内容,而不需要整个页面的刷新。在这个例子中...
- **DataTable**:`DataTable`是.NET框架中的一个类,用于表示内存中的表格数据。它提供了类似于数据库表的结构,可以存储和操作数据。 - **Excel**:Microsoft Excel是一款流行的电子表格应用软件,常用于数据处理...
在实现异步获取DataTable并显示的过程中,需要注意数据的异步加载、前端与后端的同步问题、线程安全以及对数据库操作的优化等技术细节。 总之,***异步获取DataTable并显示的实现方法是一个涉及前后端协作的技术...
在C#中,你可以使用`BindingSource`对象作为数据中介,将数据源(如DataSet或DataTable)与GridView关联起来。例如: ```csharp DataSet dataSet = new DataSet(); // 加载数据到dataSet... BindingSource binding...
- 异步加载:对于大型数据集,使用异步加载技术,提高用户体验。 - 错误处理:合理处理网络异常和数据错误,提供友好的用户提示。 总的来说,结合Ztree和treeTable,Java开发者可以轻松创建功能丰富的树形菜单和...
除了直接操作HTML表格,它还可以与服务器进行异步交互(AJAX)获取数据,实现动态加载和更新。例如,使用`ajax`选项指定数据来源: ```javascript $('#example').DataTable({ ajax: 'data.json', columns: [ { ...
- **数据源支持**:DataTables支持多种数据源,包括DOM(直接从HTML表格获取数据)、Ajax(异步加载数据)、服务器端处理(仅发送请求参数,服务器返回处理后的数据)以及JSON、XML等多种数据格式。 - **排序功能**...
jQuery dataTables 插件是一个优秀的表格插件,应用非常广泛,本文给大家介绍利用ASP.NET MVC和Bootstrap快速搭建个人博客之后台dataTable数据列表,非常不错,具有参考借鉴价值,感兴趣的朋友一起看下吧