`
adwerrd
  • 浏览: 18565 次
文章分类
社区版块
存档分类
最新评论

DataTables ajax获取数据设置

阅读更多
网上很多零散的设置代码,但是版本更迭之后大多会出问题,最近公司一直在用DataTables,走了一些弯路,总算是大概做了出来,我把代码贴出来,需要用的同学参考一下。

$('#example').DataTable({
					"bDestory" : true,
					"bProcessing" : true,
					"serverSide": true,//如果数据量不大,建议设置为false
					"bSort" : true, // 排序功能
					"searching" : false,//自带搜索,简单查询很方便
					"sPaginationType" : "full_numbers",//分页类型
					"ajax" : url,//ajax提交地址
					"iDisplayLength" : 50, // 默认显示的记录数
					"oLanguage" : {
					"sProcessing" : "<img src='"+ XFrame.getContextPath()
						+ "/assets/img/loading.gif' />",
					"sLengthMenu" : "每页显示 _MENU_ 条记录",
					"sZeroRecords" : "抱歉, 没有找到",
					"sInfo" : "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
					"sInfoEmpty" : "没有数据",
					"sInfoFiltered" : "(从 _MAX_ 条数据中检索)",
					"sSearch" : "搜索:",
					"oPaginate" : {
						"sFirst" : "首页",
						"sPrevious" : "前一页",
						"sNext" : "后一页",
						"sLast" : "尾页"
					},
					"sZeroRecords" : "没有检索到数据",
					},
					"columns" : [ {  //对应数据返回的字段名
						"data" : "eventId"}, {
						"data" : "source"}, {
						"data" : "userId"}, {
						"data" : "account"}, {
						"data" : "level"}, {
						"data" : "url"}, {
						"data" : "createTime"} ],
					"columnDefs" : [ {//自定义列
						"targets" : [ 7 ], // 目标列位置,下标从0开始
						"data" : "eventId", // 数据列名
						"render" : function(data, type, full) { // 返回自定义内容
							return "<a href=\"javascript:Member.log('"
								+ data
								+ "')\">删除</a>";
							}
						} ]
					});
分享到:
评论

相关推荐

    DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)

    Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格...这篇文章主要介绍了DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等),需要的朋友可以参考下

    datatables使用ajax实例

    此外,datatables的Ajax配置非常灵活,可以设置多种参数来定制请求,比如`type`(GET或POST)、`dataType`(json、xml等)、`data`(附加到请求的数据)以及`success`和`error`回调函数,以便在请求成功或失败时执行...

    Datatables使用Ajax方式读取数据

    在本教程中,我们将探讨如何利用Datatables与Ajax结合,动态地从服务器获取并展示数据。 首先,让我们了解基础概念。jQuery是一个轻量级的JavaScript库,简化了HTML文档遍历、事件处理、动画以及Ajax交互。...

    jQuery+datatables插件实现ajax加载数据与增删改查功能示例

    2. ajax加载数据:涉及通过ajax技术从服务器端动态获取数据,并在网页上实时更新表格内容。 3. 增删改查功能:通常指的是在数据库管理系统中对数据进行增(创建)、删(删除)、改(更新)、查(查询)的基本操作。...

    Datatables实现多选框与AJAX返回数据 JAVA版

    首先,Datatables允许用户通过AJAX请求获取数据,而不是在页面加载时一次性加载所有数据。这样可以提高页面加载速度,并且当数据量大时,能够有效减少浏览器内存消耗。在Java环境中,通常会使用Spring MVC作为后端...

    datatables刷新插件fnReloadAjax

    `DataTables`本身支持Ajax数据源,允许从服务器端动态获取数据并显示在表格中。然而,当你需要在用户操作后(如筛选、排序或过滤)即时更新表格数据时,`fnReloadAjax`插件就派上用场了。这个插件能够便捷地触发表格...

    DataTables很好用的数据表格工具

    - 数据源:DataTables可以与服务器端交互获取数据,也可以直接使用静态数据。对于动态数据,通常使用Ajax进行异步加载。 3. **与后端技术的结合**: - Java:在Java环境中,开发者可以使用诸如Spring MVC、Struts...

    Laravel开发-datatables

    这里的`ajax`属性指定了服务器获取数据的URL,即`users.data`路由,需要在`routes/web.php`或`routes/api.php`中定义: ```php Route::get('users/data', 'UserController@getUsersForDataTable'); ``` 至此,我们...

    jQuery DataTables插件自定义Ajax分页实例解析

    String类型用于设置获取数据的URL地址,object类型则与jQuery.ajax的定义类似,而function类型则用于自定义获取数据的功能。文章中还提供了前端页面的代码示例,包括对HTML、CSS和JavaScript的引入,以及如何通过...

    PHP+Ajax+bootstrap+dataTables无刷新分页表格插件

    在这个场景中,PHP负责从数据库中获取数据,如MySQL,通过SQL查询将数据组织成适合表格显示的格式。 Ajax(Asynchronous JavaScript and XML)是Web开发中的一个核心技术,它使得前端可以异步地与服务器进行通信。...

    jquery-dataTables简单实例

    DataTables支持多种数据源,包括HTML表格数据、服务器端数据(Ajax)和JSON对象。在本例中,假设数据已内置于HTML表格中,无需额外配置。 3. **功能定制** DataTables提供很多可选参数以定制其行为。例如,可以...

    datatables 示例

    - 如果数据量大,可以使用服务器处理模式(server-side processing),通过Ajax从服务器获取数据。 - `ajax`选项用于配置数据源,可以是URL或函数,返回的数据格式通常是JSON。 **7. 列操作** - 可以通过`...

    [简单]DataTables简单示例

    但也可以通过Ajax从服务器获取数据。例如,使用`ajax`属性指定数据源URL: ```javascript $('#example').DataTable({ ajax: 'data.json' }); ``` 6. 回调函数:DataTables支持多种回调函数,如`fnDrawCallback...

    ssm整合datatables实例Demo

    在SSM环境中,Datatables通过Ajax请求从服务器获取数据,服务器端则使用SpringMVC来处理这些请求,MyBatis执行对应的SQL查询,最后将结果集转化为JSON格式返回给前端。 在本实例中,`readme.htm`可能包含项目的介绍...

    JQuery DataTables示例,包含分页、拖拽、导出

    服务器端分页在每次改变页码或搜索条件时向服务器发送请求,获取当前页的数据;客户端分页则将所有数据一次性加载到客户端,然后进行本地处理。这个示例中提到了前后端分页,这意味着项目同时支持这两种方式,可以...

    DataTables-1.10.6

    可以设置 `ajax` 参数指向数据接口,DataTable 将自动处理数据的获取和显示。 7. **自定义渲染** 通过定义 `render` 函数,用户可以控制表格中每个单元格的内容呈现方式,例如格式化日期、货币或者链接。 8. **...

    jquery dataTables组件

    3. **Ajax数据源**:使用DataTables的`ajax`选项设置数据来源,如下: ```javascript $('#example').DataTable({ ajax: 'server_script.php' }); ``` ### 三、Bootstrap整合 1. **样式兼容**:DataTables提供...

    DataTables (1).zip

    通过`ajax`参数可以设置Ajax数据源,`dataSrc` 参数指定返回数据的键值。 - **扩展功能**:如前面提到的Buttons扩展,可以通过引入对应的JS和CSS文件,然后在初始化时添加相应的配置,启用这些功能。例如,`dom: '...

    datatables demo

    为了展示这些数据,Datatables 支持 AJAX 数据源,允许它从远程服务器动态获取数据。这种异步加载方式减少了页面加载时间,同时保持了表格的实时更新能力。 实现 Datatables 的异步请求数据,首先需要在 HTML 中...

Global site tag (gtag.js) - Google Analytics