网上很多零散的设置代码,但是版本更迭之后大多会出问题,最近公司一直在用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与Ajax结合,动态地从服务器获取并展示数据。 首先,让我们了解基础概念。jQuery是一个轻量级的JavaScript库,简化了HTML文档遍历、事件处理、动画以及Ajax交互。...
Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格...这篇文章主要介绍了DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等),需要的朋友可以参考下
此外,datatables的Ajax配置非常灵活,可以设置多种参数来定制请求,比如`type`(GET或POST)、`dataType`(json、xml等)、`data`(附加到请求的数据)以及`success`和`error`回调函数,以便在请求成功或失败时执行...
2. ajax加载数据:涉及通过ajax技术从服务器端动态获取数据,并在网页上实时更新表格内容。 3. 增删改查功能:通常指的是在数据库管理系统中对数据进行增(创建)、删(删除)、改(更新)、查(查询)的基本操作。...
首先,Datatables允许用户通过AJAX请求获取数据,而不是在页面加载时一次性加载所有数据。这样可以提高页面加载速度,并且当数据量大时,能够有效减少浏览器内存消耗。在Java环境中,通常会使用Spring MVC作为后端...
`DataTables`本身支持Ajax数据源,允许从服务器端动态获取数据并显示在表格中。然而,当你需要在用户操作后(如筛选、排序或过滤)即时更新表格数据时,`fnReloadAjax`插件就派上用场了。这个插件能够便捷地触发表格...
- 数据源:DataTables可以与服务器端交互获取数据,也可以直接使用静态数据。对于动态数据,通常使用Ajax进行异步加载。 3. **与后端技术的结合**: - Java:在Java环境中,开发者可以使用诸如Spring MVC、Struts...
这里的`ajax`属性指定了服务器获取数据的URL,即`users.data`路由,需要在`routes/web.php`或`routes/api.php`中定义: ```php Route::get('users/data', 'UserController@getUsersForDataTable'); ``` 至此,我们...
String类型用于设置获取数据的URL地址,object类型则与jQuery.ajax的定义类似,而function类型则用于自定义获取数据的功能。文章中还提供了前端页面的代码示例,包括对HTML、CSS和JavaScript的引入,以及如何通过...
在这个场景中,PHP负责从数据库中获取数据,如MySQL,通过SQL查询将数据组织成适合表格显示的格式。 Ajax(Asynchronous JavaScript and XML)是Web开发中的一个核心技术,它使得前端可以异步地与服务器进行通信。...
DataTables支持多种数据源,包括HTML表格数据、服务器端数据(Ajax)和JSON对象。在本例中,假设数据已内置于HTML表格中,无需额外配置。 3. **功能定制** DataTables提供很多可选参数以定制其行为。例如,可以...
- 如果数据量大,可以使用服务器处理模式(server-side processing),通过Ajax从服务器获取数据。 - `ajax`选项用于配置数据源,可以是URL或函数,返回的数据格式通常是JSON。 **7. 列操作** - 可以通过`...
但也可以通过Ajax从服务器获取数据。例如,使用`ajax`属性指定数据源URL: ```javascript $('#example').DataTable({ ajax: 'data.json' }); ``` 6. 回调函数:DataTables支持多种回调函数,如`fnDrawCallback...
在SSM环境中,Datatables通过Ajax请求从服务器获取数据,服务器端则使用SpringMVC来处理这些请求,MyBatis执行对应的SQL查询,最后将结果集转化为JSON格式返回给前端。 在本实例中,`readme.htm`可能包含项目的介绍...
服务器端分页在每次改变页码或搜索条件时向服务器发送请求,获取当前页的数据;客户端分页则将所有数据一次性加载到客户端,然后进行本地处理。这个示例中提到了前后端分页,这意味着项目同时支持这两种方式,可以...
可以设置 `ajax` 参数指向数据接口,DataTable 将自动处理数据的获取和显示。 7. **自定义渲染** 通过定义 `render` 函数,用户可以控制表格中每个单元格的内容呈现方式,例如格式化日期、货币或者链接。 8. **...
Datatables 提供了多种数据源支持,包括CSV、JSON、XML等,同时也可以直接从数据库(如MySQL、PostgreSQL等)获取数据。在示例中,开发者可以学习如何设置这些数据源,以及如何处理加载、展示和更新数据的逻辑。 ...
3. **Ajax数据源**:使用DataTables的`ajax`选项设置数据来源,如下: ```javascript $('#example').DataTable({ ajax: 'server_script.php' }); ``` ### 三、Bootstrap整合 1. **样式兼容**:DataTables提供...
通过`ajax`参数可以设置Ajax数据源,`dataSrc` 参数指定返回数据的键值。 - **扩展功能**:如前面提到的Buttons扩展,可以通过引入对应的JS和CSS文件,然后在初始化时添加相应的配置,启用这些功能。例如,`dom: '...