当前位置:Gxlcms > PHP教程 > 如何利用ThinkPHP整合datatables实现服务端分页

如何利用ThinkPHP整合datatables实现服务端分页

时间:2021-07-01 10:21:17 帮助过:19人阅读

下面为大家分享一篇ThinkPHP整合datatables实现服务端分页的示例代码,具有很好的参考价值,希望对大家有所帮助。

最近做东西有一个需求,因为数据量很大,在这里我决定使用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代码为:

  1. $('.table-sort').dataTable({
  2. processing: true,
  3. serverSide: true,
  4. ajax: {
  5. "url":"{:U('Msg/index')}",
  6. "data":function(d){ //额外传递的参数
  7. d.mintime = $('#logmin').val();
  8. d.maxtime = $('#logmax').val();
  9. }
  10. },
  11. bStateSave: true,//状态保存
  12. aLengthMenu : [20, 30, 50, 100, 150],
  13. bProcessing : true,
  14. bAutoWidth: false,
  15. bFilter : true, //是否启动过滤、搜索功能
  16. bInfo : true, //是否显示页脚信息,DataTables插件左下角显示记录数
  17. createdRow: function ( row, data, index ) {
  18. $(row).addClass('text-c');
  19. $('#count').html(data.recordsFiltered);
  20. },
  21. aoColumns: [
  22. {
  23. "sClass": "text-center",
  24. "data": "id",
  25. "render": function (data, type, full, meta) {
  26. return '<input type="checkbox" name="select" value="' + data + '" />';
  27. },
  28. "bSortable": false
  29. },
  30. { "mData": "id" },
  31. { "mData": "fromnickname"},
  32. { "mData": "content" },
  33. { "mData": "msgtype" },
  34. { "mData": "time"},
  35. {
  36. "sClass": "text-center",
  37. "data": "id",
  38. "render": function (data, type, full, meta) {
  39. 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>';
  40. 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>';
  41. return html;
  42. },
  43. "bSortable": false
  44. }
  45. ]
  46. });

2.服务端方面:

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

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

1)控制器代码:

  1. public function index()
  2. {
  3. if(IS_AJAX){
  4. $list = D('Msg')->getData(I('get.'));
  5. $this->ajaxReturn($list);
  6. }
  7. $this->display();
  8. }

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

  1. public function getData($data)
  2. {
  3. //获取Datatables发送的参数 必要
  4. $draw = $data['draw']; //这个值直接返回给前台
  5. //获取时间区间
  6. $timeArr['mintime'] = $data['mintime'];
  7. $timeArr['maxtime'] = $data['maxtime'];
  8. $where = $this->dealTime($timeArr);
  9. //搜索框
  10. $search = trim($data['search']['value']); //获取前台传过来的过滤条件
  11. if(strlen($search) > 0) {
  12. $where['id|fromnickname|content|msgtype'] = array('like','%'.$search.'%');
  13. }
  14. //定义查询数据总记录数sql
  15. $recordsTotal = $this->count();
  16. //定义过滤条件查询过滤后的记录数sql
  17. $recordsFiltered = $this->where($where)->count();
  18. //排序条件
  19. $orderArr = [1=>'id', 2=>'fromnickname', 3=>'content', 4=>'msgtype', 5=>'time'];
  20. //获取要排序的字段
  21. $orderField = (empty($orderArr[$data['order']['0']['column']])) ? 'id' : $orderArr[$data['order']['0']['column']];
  22. //需要空格,防止字符串连接在一块
  23. $order = $orderField.' '.$data['order']['0']['dir'];
  24. //按条件过滤找出记录
  25. $result = [];
  26. //备注:$data['start']起始条数 $data['length']查询长度
  27. $result = $this->field('id,fromnickname,content,msgtype,time')
  28. ->where($where)
  29. ->order($order)
  30. ->limit(intval($data['start']), intval($data['length']))
  31. ->select();
  32. //处理数据
  33. if(!empty($result)) {
  34. foreach ($result as $key => $value) {
  35. $result[$key]['time'] = date("Y-m-d H:i:s",$value['time']);
  36. $result[$key]['recordsFiltered'] = $recordsFiltered;
  37. }
  38. }
  39. //拼接要返回的数据
  40. $list = array(
  41. "draw" => intval($draw),
  42. "recordsTotal" => intval($recordsTotal),
  43. "recordsFiltered"=>intval($recordsFiltered),
  44. "data" => $result,
  45. );
  46. return $list;
  47. }

3) 实现自定义ajax搜索

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

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

  1. <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属性定义额外要传递的参数

例子:

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

4) 代码截图:

a. html页面

b.js部分

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

thinkPHP5实现分页功能的方法分析

关于ThinkPHP实现静态缓存和动态缓存的分析

以上就是如何利用ThinkPHP整合datatables实现服务端分页的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行