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
php flv视频时间获取函数
Jun 29 PHP
PHP读取xml方法介绍
Jan 12 PHP
PHP操作MongoDB GridFS 存储文件的详解
Jun 20 PHP
thinkphp常见路径用法分析
Dec 02 PHP
PHP实现简单爬虫的方法
Jul 29 PHP
总结一些PHP中好用但又容易忽略的小知识
Jun 02 PHP
利用PHP实现开心消消乐的算法示例
Oct 12 PHP
PHP二维关联数组的遍历方式(实例讲解)
Oct 18 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
Oct 14 PHP
thinkphp5使html5实现动态跳转的例子
Oct 16 PHP
PHP pthreads v3使用中的一些坑和注意点分析
Feb 21 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
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
PHP备份/还原MySQL数据库的代码
2011/01/06 PHP
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
php实现保存周期为1天的购物车类
2017/07/07 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
javascript强大的日期函数代码分享
2013/09/04 Javascript
浅析JavaScript中的常用算法与函数
2013/11/21 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
2016/10/25 Javascript
JavaScript文件的同步和异步加载的实现代码
2017/08/19 Javascript
详解vue-router 路由元信息
2017/09/13 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
python查找第k小元素代码分享
2013/12/18 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
python+django+rest框架配置创建方法
2019/08/31 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
HTML5不支持frameset的两种解决方法
2016/11/14 HTML / CSS
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
Yahoo-PHP面试题1
2016/07/20 面试题
如何写一份好的自荐信
2014/01/02 职场文书
拾金不昧表扬信范文
2014/01/11 职场文书
婚礼主持词开场白
2014/03/13 职场文书
银行开户授权委托书格式
2014/10/10 职场文书
2014年副班长工作总结
2014/12/10 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
好员工观后感
2015/06/17 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL
如何基于python实现单目三维重建详解
2022/06/25 Python