ThinkPHP整合datatables实现服务端分页的示例代码


Posted in PHP onFebruary 10, 2018

最近做东西有一个需求,因为数据量很大,在这里我决定使用datatables的服务端分页,同时还需要传递查询条件到服务端。在网上搜索的大部分文章都感觉有些误差,于是自己封装了一下,主要配置/工具为:

服务端:php(使用thinkphp)

页面样式来自于H-ui框架(datatables版本为1.10.0)

主要修改(databases)配置项为:

1) bProcessing:true 使用ajax源

2) serverSide:true 使用服务端分页

3) createdRow:function(){} 回调函数,用于添加事件或类名

4) aoColumns 用于处理、显示数据,其中render属性用于自定义列

1.datatables 的js代码为:

$('.table-sort').dataTable({
 processing: true,
  serverSide: true,
  ajax: {
   "url":"{:U('Msg/index')}",
   "data":function(d){ //额外传递的参数
    d.mintime = $('#logmin').val();
    d.maxtime = $('#logmax').val();
   }
  },
  bStateSave: true,//状态保存
  aLengthMenu : [20, 30, 50, 100, 150],
  bProcessing : true,
  bAutoWidth: false,
  bFilter : true, //是否启动过滤、搜索功能
  bInfo : true, //是否显示页脚信息,DataTables插件左下角显示记录数 
  createdRow: function ( row, data, index ) {
   $(row).addClass('text-c');
   $('#count').html(data.recordsFiltered);
  },
  aoColumns: [
   {
    "sClass": "text-center",
    "data": "id",
    "render": function (data, type, full, meta) {
     return '<input type="checkbox" name="select" value="' + data + '" />';
    },
    "bSortable": false
   },
   { "mData": "id" },
   { "mData": "fromnickname"},
   { "mData": "content" },
   { "mData": "msgtype" },
   { "mData": "time"},
   {
    "sClass": "text-center",
    "data": "id",
    "render": function (data, type, full, meta) {
     html = '<a title="查看" href="javascript:;" rel="external nofollow" rel="external nofollow" onclick="show(`查看`,`__URL__/show/id/'+ data + '`,``,`610`)" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">查看</i></a>';
     html += '<a style="text-decoration:none" class="ml-5" onClick="signDel(this,'+ data +')" href="javascript:;" rel="external nofollow" rel="external nofollow" title="删除"><i class="Hui-iconfont"></i>删除</a>';
     return html;
    },
    "bSortable": false
   }
  ]
});

2.服务端方面:

控制器:
接收参数如下:
draw    前端传过来的值,原值返回,用于验证
mintime、maxtime 自定义参数(时间)
search.value  datatables搜索框参数,用于查询筛选
order.0.column  要排序的单元格(从0开始,字段需要自己设置)
order.0.dir   排序(升序、降序)
start    起始条数(第几条开始)
length    查询长度
返回的数据如下:
draw    返回前端传过来的值
recordsTotal  记录总条数
recordsFiltered  条件筛选后的记录总条数
data    服务端查询的数据
返回数据形式:json

3.服务端后端完整代码如下:

1)控制器代码:

public function index()
{
 if(IS_AJAX){
  $list = D('Msg')->getData(I('get.'));
  $this->ajaxReturn($list);
 }
 $this->display();
}

2) Model层代码:(*其中,dealTime方法主要用于处理时间段)

public function getData($data)
{
 //获取Datatables发送的参数 必要
 $draw = $data['draw']; //这个值直接返回给前台
 //获取时间区间
 $timeArr['mintime'] = $data['mintime'];
 $timeArr['maxtime'] = $data['maxtime'];
 $where = $this->dealTime($timeArr);
 //搜索框
 $search = trim($data['search']['value']); //获取前台传过来的过滤条件 
 if(strlen($search) > 0) {
  $where['id|fromnickname|content|msgtype'] = array('like','%'.$search.'%');
 }
 //定义查询数据总记录数sql
 $recordsTotal = $this->count();
 //定义过滤条件查询过滤后的记录数sql
 $recordsFiltered = $this->where($where)->count();
 //排序条件
 $orderArr = [1=>'id', 2=>'fromnickname', 3=>'content', 4=>'msgtype', 5=>'time'];
 //获取要排序的字段
 $orderField = (empty($orderArr[$data['order']['0']['column']])) ? 'id' : $orderArr[$data['order']['0']['column']];
 //需要空格,防止字符串连接在一块
 $order = $orderField.' '.$data['order']['0']['dir'];
 //按条件过滤找出记录
 $result = [];
 //备注:$data['start']起始条数 $data['length']查询长度
 $result = $this->field('id,fromnickname,content,msgtype,time')
     ->where($where)
     ->order($order)
     ->limit(intval($data['start']), intval($data['length']))
     ->select();
 //处理数据
 if(!empty($result)) {
  foreach ($result as $key => $value) {
   $result[$key]['time'] = date("Y-m-d H:i:s",$value['time']);
   $result[$key]['recordsFiltered'] = $recordsFiltered;
  }
 }
 //拼接要返回的数据
 $list = array(
  "draw" => intval($draw),
  "recordsTotal" => intval($recordsTotal),
  "recordsFiltered"=>intval($recordsFiltered),
  "data" => $result,
 );
 return $list;
}

3) 实现自定义ajax搜索

1. 在WdatePicker中添加onpicked回调函数
2. 执行table.fnFilter(),其中table为datatables对象

以WdatePicker插件为例(input框类似,绑定onchange事件即可):

<input type="text" onfocus="WdatePicker({maxDate:'#F{ $dp.$D(\'logmax\')||\'%y-%M-%d\'}', onpicked:function(){table.fnFilter();}})" name="mintime" id="logmin" class="input-text Wdate" style="width:120px;">

3. datatables中ajax属性中data属性定义额外要传递的参数

例子:

ajax: {
  "url":"{:U('Msg/index')}",
  "data":function(d){ //额外传递的参数
   d.mintime = $('#logmin').val();
   d.maxtime = $('#logmax').val();
  }

4) 代码截图:

a. html页面

ThinkPHP整合datatables实现服务端分页的示例代码 

b.js部分

ThinkPHP整合datatables实现服务端分页的示例代码 

以上这篇ThinkPHP整合datatables实现服务端分页的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
php中文件上传的安全问题
Oct 09 PHP
多文件上传的例子
Oct 09 PHP
Godaddy空间Zend Optimizer升级方法
May 10 PHP
一个简单php扩展介绍与开发教程
Aug 19 PHP
PHP写的获取各搜索蜘蛛爬行记录代码
Aug 21 PHP
采用header定义为文件然后readfile下载(隐藏下载地址)
Jan 31 PHP
Yii中render和renderPartial的区别
Sep 03 PHP
php结合安卓客户端实现查询交互实例
May 05 PHP
Laravel5.1数据库连接、创建数据库、创建model及创建控制器的方法
Mar 29 PHP
PHP Mysqli 常用代码集合
Nov 12 PHP
PHP之多条件混合筛选功能的实现方法
Oct 09 PHP
gearman中任务的优先级和返回状态实例分析
Feb 27 PHP
PHP实现APP微信支付的实例讲解
Feb 10 #PHP
PHP有序表查找之插值查找算法示例
Feb 10 #PHP
PHP有序表查找之二分查找(折半查找)算法示例
Feb 09 #PHP
php在windows环境下获得cpu内存实时使用率(推荐)
Feb 08 #PHP
PHP基于redis计数器类定义与用法示例
Feb 08 #PHP
php处理抢购类功能的高并发请求
Feb 08 #PHP
php+redis实现商城秒杀功能
Nov 19 #PHP
You might like
PHP 第二节 数据类型之转换
2012/04/28 PHP
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
jquery密码强度校验
2015/12/02 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
vue实现点击选中,其他的不选中方法
2018/09/05 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
Python 初始化多维数组代码
2008/09/06 Python
实例解析Python设计模式编程之桥接模式的运用
2016/03/02 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
Python类中self参数用法详解
2020/02/13 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
乔迁宴答谢词
2014/01/21 职场文书
副厂长岗位职责
2014/02/02 职场文书
《将心比心》教学反思
2014/04/08 职场文书
财务内勤岗位职责
2014/04/17 职场文书
业务员自荐信范文
2014/04/20 职场文书
教师个人学习总结
2015/02/11 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
浅谈Python中对象是如何被调用的
2022/04/06 Python