摘要:提供了完善的前后台分页功能,现将后台分页的学习和使用过程总结如下,方便日后参考。
DataTables提供了完善的前后台分页功能,现将后台分页的学习和使用过程总结如下,方便日后参考。
一、前台页面的配置DataTables几乎可以在不改变前台代码部分即可实现前台分页到后台分页的转换,唯一需要做的就是在代码中开启DataTables后台分页功能即可:
"serverSide" : true,// 服务器端分页处理
至此完成了前台页面的配置(就是这么简单,最主要的是后台处理逻辑的改变)
二、后台处理逻辑的改变要想使用后台分页,必须在后台使用服务器端语言处理过滤数据,然后将数据按照DataTables的要求返回到前台即可(具体要求见下文)
三、DataTables参数信息DataTable提供了一个用来统一处理数据的类ssp.class.php,借用此类可以更加方便的实现后台逻辑部分
以下翻译仅供参考,如有错误请指正
开启后台分页后向后台发送的参数以及需要返回的数据要求如下:
发送的参数:
当通过服务器端处理一个请求时,DataTables将发送如下数据给服务器端让其知道它所需要的数据
参数名称 | 参数类型 | 参数说明 |
---|---|---|
draw | integer | 请求序号。由于Ajax请求是异步的,和返回的参数draw一起用来确定序号 |
start | integer | 当前从第几页开始(默认第一页为"0") |
length | integer | 当前页所需要的数据条数(值为"-1"时代表返回所有的数据) |
search[value] | string | 全局搜索的值(将应用在每一个设置为可搜索的列中) |
search[regex] | boolean | 全局搜索是否启用正则表达式 |
order[i][column] | integer | 排序将会应用到第i列 |
order[i][dir] | string | 当前列的排序方向(asc=>正序,desc=>逆序) |
columns[i][data] | string | 当前列数据源 |
columns[i][name] | string | 当前列名称 |
columns[i][searchable] | boolean | 当前列是否可搜索 |
columns[i][orderable] | boolean | 当前列是否可排序 |
columns[i][search][value] | string | 当前列搜索的值 |
columns[i][search][regex] | boolean | 当前列搜索是否启用正则表达式 |
需要返回的参数:
DataTables需要以JSON的形式返回如下信息
参数名称 | 参数类型 | 参数说明 |
---|---|---|
draw | integer | 请求序号(DataTables强烈建议将此参数强制转换为int型,以阻止可能的XSS攻击) |
recordsTotal | integer | 过滤之前的总数据量 |
recordsFiltered | integer | 过滤之后的总数据量 |
data | array | 需要在表格中显示的数据 |
error | string | 错误信息,可选参数 |
后台需要接收处理数据的文件server_processing.php,参考代码如下:
"first_name", "dt" => 0 ), array( "db" => "last_name", "dt" => 1 ), array( "db" => "position", "dt" => 2 ), array( "db" => "office", "dt" => 3 ), array( "db" => "start_date", "dt" => 4, "formatter" => function( $d, $row ) { return date( "jS M y", strtotime($d)); } ), array( "db" => "salary", "dt" => 5, "formatter" => function( $d, $row ) { return "$".number_format($d); } ) ); // SQL server connection information $sql_details = array( "user" => "", "pass" => "", "db" => "", "host" => "" ); /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * If you just want to use the basic configuration for DataTables with PHP * server-side, there is no need to edit below this line. */ require( "ssp.class.php" ); echo json_encode( SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns ) );五、Tips:
由于ssp类的限制(后期可自己改写,解除限制),无法进行多表查询,可通过创建视图的折中方式解决问题;
可以使用ssp类中的complex方法来实现对数据过滤更加高级的处理;
参考文档:官方Manual: Server-side processing;
官方examples: Server-side processing;
DataTablesGitHub地址.
关于我文章转载自我的博客:
Heier Blog:Heier Home
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/21358.html
摘要:再看看另一个方法,的提供的数据统计总条数的方法是的,默认计算分页总数是根据数组计算的,而的数据就是我们查询赋值给提供器的。统计总数预处理函数直接获取通过函数获取传递给数据提供器的数据总和。 首先看看ArrayDataProvider官方的doc: ArrayDataProvider implements a data provider based on a data array.Ar...
摘要:使用方便,快捷。但有时候用户需求对分页有需求,例如输入页数进行分页跳转。 DataTable使用方便,快捷。但有时候用户需求对分页有需求,例如输入页数进行分页跳转。这样就需要扩展功能了,datatable也支持自定义扩展,下面以使用DataTable bootstrap分页为例 1. 初始化DataTable var $table = $(#listTable); var lis...
摘要:背景因项目需要,选择了这款表格插件做数据展示。在实际开发过程中,需要将所有的搜索条件放在页面顶部,所以我需要的搜索和分页条数单独提出来。解决办法办法其实很简单,只需要参考的官网文档就可找到。 背景 因项目需要,选择了DataTables这款表格插件做数据展示。在实际开发过程中,需要将所有的搜索条件放在页面顶部,所以我需要DataTables的搜索和分页条数单独提出来。 解决办法 办法其...
摘要:简介与的作用一样,比更漂亮是一款表格插件。它是一个高度灵活的工具,可以将任何表格添加高级的交互功能。 DataTables简介 与EasyUI的Datagrid作用一样,比easyui更漂亮 Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。 支持分页、排序、搜索 支持4种数据源 支持多种主题 拥有多种扩展 文件引入 ...
摘要:简介与的作用一样,比更漂亮是一款表格插件。它是一个高度灵活的工具,可以将任何表格添加高级的交互功能。 DataTables简介 与EasyUI的Datagrid作用一样,比easyui更漂亮 Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。 支持分页、排序、搜索 支持4种数据源 支持多种主题 拥有多种扩展 文件引入 ...
阅读 2160·2021-09-04 16:40
阅读 1451·2021-08-13 15:07
阅读 3604·2019-08-30 15:53
阅读 3193·2019-08-30 13:11
阅读 1068·2019-08-29 17:22
阅读 1810·2019-08-29 12:47
阅读 1469·2019-08-29 11:27
阅读 2221·2019-08-26 18:42