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 相关文章推荐
IIS安装Apache伪静态插件的具体操作图文
Jul 01 PHP
php使用strtotime和date函数判断日期是否有效代码分享
Dec 25 PHP
PHP处理SQL脚本文件导入到MySQL的代码实例
Mar 17 PHP
PHP中exec函数和shell_exec函数的区别
Aug 20 PHP
smarty模板引擎中变量及变量修饰器用法实例
Jan 22 PHP
PHP实现图片上传并压缩
Dec 22 PHP
weiphp微信公众平台授权设置
Jan 04 PHP
详解Laravel视图间共享数据与视图Composer
Aug 04 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
Jan 22 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
Jun 13 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
Jun 17 PHP
Laravel timestamps 设置为unix时间戳的方法
Oct 11 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
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
BootStrap表单验证实例代码
2017/01/13 Javascript
深入理解vue Render函数
2017/07/19 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python生成器的使用方法
2013/11/21 Python
python处理html转义字符的方法详解
2016/07/01 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
Canvas中设置width与height的问题浅析
2018/11/01 HTML / CSS
高级护理实习生自荐信
2013/09/28 职场文书
小孩百日宴答谢词
2014/01/15 职场文书
学术会议邀请函范文
2014/01/22 职场文书
中专生自我鉴定范文
2014/02/02 职场文书
售后服务承诺书范文
2014/03/26 职场文书
审计班子对照检查材料
2014/08/27 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
实习生辞职信范文
2015/03/02 职场文书
2015年物业管理工作总结
2015/04/23 职场文书
基于Redis过期事件实现订单超时取消
2021/05/08 Redis