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 相关文章推荐
Ajax+PHP 边学边练 之二 实例
Nov 24 PHP
PHP禁止页面缓存的代码
Oct 23 PHP
Session保存到数据库的php类分享
Oct 24 PHP
PHP仿盗链代码
Jun 03 PHP
php生成缩略图填充白边(等比缩略图方案)
Dec 25 PHP
基于php和mysql的简单的dao类实现crud操作功能
Jan 27 PHP
PHP缓存机制Output Control详解
Jul 14 PHP
如何离线执行php任务
Feb 21 PHP
php + nginx项目中的权限详解
May 23 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
Jun 07 PHP
PHP使用Redis实现防止大并发下二次写入的方法
Oct 09 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
Sep 29 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技术实现加载字体并保存成图片
2015/07/27 PHP
PHP中的session安全吗?
2016/01/22 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
JS中style属性
2006/10/11 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
js字符串完全替换函数分享
2014/12/03 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
前后端如何实现登录token拦截校验详解
2018/09/03 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
js+cavans实现图片滑块验证
2020/09/29 Javascript
Python代码缩进和测试模块示例详解
2018/05/07 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
在C语言中实现抽象数据类型什么方法最好
2014/06/26 面试题
Python文件操作的面试题
2013/06/22 面试题
什么是继承
2013/12/07 面试题
面试求职的个人自我评价
2013/11/16 职场文书
贷款委托书范本
2014/04/08 职场文书
模范班主任事迹材料
2014/12/17 职场文书
2014年党总支工作总结
2014/12/18 职场文书
房屋租赁意向书范本
2015/05/09 职场文书
提档介绍信范文
2015/10/22 职场文书
小程序实现文字循环滚动动画
2021/06/14 Javascript
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers