`
西蜀石兰
  • 浏览: 119004 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

dataTable重新异步加载表格数据

 
阅读更多
如果表格的数据不是固定的,譬如需要根据时间等参数变化,那么不可避免的需要异步加载数据。
需要注意的是,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);
					}
				}

分享到:
评论

相关推荐

    使用DataTable插件实现异步加载数据

    本文将重点介绍如何使用jQuery和dataTable插件来实现表格数据的异步加载。 首先,我们来了解dataTable插件。dataTable是一个非常流行的jQuery插件,能够将普通的HTML表格转换成具有高级交互功能的动态表格。它支持...

    JavaScript YUI 2.8: DataTable jquery form 异步请求显示数据分页

    UI Library 的一部分,它提供了一种强大的方式来展示和操作表格数据。jQuery form 插件则用于处理表单的异步提交,通常用于实现无刷新的数据更新。在本文中,我们将深入探讨这两个库如何结合使用,以及如何实现数据...

    bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法

    接下来,我们将深入了解如何通过Bootstrap和jQuery dataTable组件实现表格数据的异步刷新。 首先,Bootstrap框架提供了一套美观且响应式的界面组件,其中包括了用于展示表格数据的dataTable插件。这个插件具备排序...

    对DataTable分页获取数据

    ### 对DataTable进行分页获取数据的方法解析 ...在实际项目开发过程中,可以根据具体需求进一步优化和完善这一方法,例如加入缓存机制或异步加载等高级特性,从而更好地满足复杂场景下的性能需求。

    json获取datatable后生成table分页显示checkbox全选

    6. **Ajax**: AJAX (Asynchronous JavaScript and XML) 是一种在无需重新加载整个网页的情况下更新部分网页内容的技术。在这个场景中,Ajax用于异步地从服务器获取JSON数据,避免了页面刷新,提高了交互性。...

    jquery 插件DataTable 最新版本下载

    总的来说,jQuery插件DataTable是现代Web应用中处理和展示表格数据的强大工具。其丰富的功能、强大的API和良好的社区支持,使其成为许多开发者的首选。在使用最新版本时,开发者应充分利用其提供的各项功能,同时...

    datatable-main.zip

    Datatable 是一个广泛用于Web开发的数据展示库,尤其在JavaScript环境中,它提供了丰富的功能来处理和展示表格数据。这个压缩包可能包含了相关的HTML、CSS、JavaScript文件以及示例代码,帮助开发者理解和应用...

    JSP中使用Ajax完美实现异步无刷新数据分页

    这种技术利用了Ajax(Asynchronous JavaScript and XML)的优势,可以在不重新加载整个页面的情况下,从服务器获取并更新部分网页内容。本文将详细讲解如何在JSP中运用Ajax实现这一功能。 首先,理解基础概念: 1. ...

    ssm框架整合+jQuery+Bootstrap实现表格数据增删改查

    在这个项目中,jQuery被用来增强用户界面的交互性,如表格数据的动态加载、增删改查操作的异步提交等。 5. **Bootstrap**:Bootstrap是Twitter开源的一个前端框架,提供了一套响应式布局、移动设备优先的Web开发...

    dataTable 小demo

    2. **Ajax技术**:在前端,`dataTable`使用Ajax异步通信来获取服务器上的数据,这样可以在不刷新整个页面的情况下更新表格内容。这提高了用户体验,因为用户可以实时查看和操作数据,而无需等待整个页面重新加载。 ...

    c#datagrid操作,解决datagridView加载慢.docx

    在加载数据时,我们使用了 DataTable 对象来存储数据,然后将其绑定到 DataGrid 控件上。 结论 在本文中,我们讨论了 DataGridView 控件的操作,特别是解决 DataGridView 加载慢的问题。我们使用 DataGrid 控件...

    jquery datatable 大数据分页面的解决方案

    jQuery DataTable插件因其强大的功能和灵活性,在Web开发中被广泛应用于表格数据的展示与管理。本文将详细介绍在使用jQuery DataTable处理大数据时,四种不同的数据来源及其对应的分页解决方案。 #### 二、数据来源...

    ajax4jsf 刷新datatable 例子

    它提供了一种方便的方式来呈现表格数据,并支持排序、分页和编辑等操作。 Ajax4jsf 提供了一个名为 `&lt;a4j:commandButton&gt;` 的组件,它可以触发异步请求,更新页面的部分内容,而不需要整个页面的刷新。在这个例子中...

    DataTable导出到Excel

    - **DataTable**:`DataTable`是.NET框架中的一个类,用于表示内存中的表格数据。它提供了类似于数据库表的结构,可以存储和操作数据。 - **Excel**:Microsoft Excel是一款流行的电子表格应用软件,常用于数据处理...

    asp.net异步获取datatable并显示的实现方法

    在实现异步获取DataTable并显示的过程中,需要注意数据的异步加载、前端与后端的同步问题、线程安全以及对数据库操作的优化等技术细节。 总之,***异步获取DataTable并显示的实现方法是一个涉及前后端协作的技术...

    DevExpress的GridView动态绑定数据集,多线程动态修改UI自动刷新

    在C#中,你可以使用`BindingSource`对象作为数据中介,将数据源(如DataSet或DataTable)与GridView关联起来。例如: ```csharp DataSet dataSet = new DataSet(); // 加载数据到dataSet... BindingSource binding...

    Ztree+treeTable实现 Java实现 树形菜单 树形表格

    - 异步加载:对于大型数据集,使用异步加载技术,提高用户体验。 - 错误处理:合理处理网络异常和数据错误,提供友好的用户提示。 总的来说,结合Ztree和treeTable,Java开发者可以轻松创建功能丰富的树形菜单和...

    datatable插件及举例说明

    除了直接操作HTML表格,它还可以与服务器进行异步交互(AJAX)获取数据,实现动态加载和更新。例如,使用`ajax`选项指定数据来源: ```javascript $('#example').DataTable({ ajax: 'data.json', columns: [ { ...

    jQuery表格插件DataTables

    - **数据源支持**:DataTables支持多种数据源,包括DOM(直接从HTML表格获取数据)、Ajax(异步加载数据)、服务器端处理(仅发送请求参数,服务器返回处理后的数据)以及JSON、XML等多种数据格式。 - **排序功能**...

    利用ASP.NET MVC和Bootstrap快速搭建个人博客之后台dataTable数据列表

    jQuery dataTables 插件是一个优秀的表格插件,应用非常广泛,本文给大家介绍利用ASP.NET MVC和Bootstrap快速搭建个人博客之后台dataTable数据列表,非常不错,具有参考借鉴价值,感兴趣的朋友一起看下吧

Global site tag (gtag.js) - Google Analytics