ThinkPHP5.0+aceAdmin+dataTables实现异步分页功能

最近在写后台的数据管理，有的时候由于数据过多需要使用分页功能，而我作为一个前端，由于用习惯了异步请求的功能在使用dataTables这个插件的时候，它也提供了利用Ajax来实现异步的分页功能，所以就去官网看了一下。

dataTables官网

后台数据列表页，用的是ThinkPHP5框架+aceAdmin—ui

虽然现在的数据比较少只有22条，但是如果数据太多的话，会卡死服务器的

页面其他代码就不展示了 只贴基础代码

这个表格代码

 

<div class="table_menu_list">
  <table class="table table-striped table-bordered table-hover" id="sample-table">
    <thead>
    <tr>
      <th width="25"><label><input type="checkbox" class="ace"><span class="lbl"></span></label></th>
      <th width="60">编号</th>
      <th width="70">机构名称</th>
      <th width="105">机构地址</th>
      <th width="70">联系人</th>
      <th width="90">联系电话</th>
      <th width="145">所属区域</th>
      <th width="100">地址经度</th>
      <th width="100">地址纬度</th>
      <th width="70">状态</th>
      <th width="120">操作</th>
    </tr>
    </thead>
    <tbody></tbody>
  </table>

然后是js实例化代码

 

var oTable1 = $('#sample-table').dataTable({
 processing: true,
 serverSide: true,
 ajax: {
  "url":"serverURL",//这个地方换成你自己的请求接口
  "data":function(d){ //额外传递的参数
  }
 },
 bStateSave: true,//状态保存
 // aLengthMenu : [10, 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);
 },
 "order": [[ 1, "asc" ]],
 aoColumns: [
  {
   "sClass": "text-center",
   "data": "aid",
   "render": function (data, type, full, meta) {
    return '<input type="checkbox" name="select" value="' + data + '" />';
   },
   "bSortable": false
  },
  { "mData": "aid" },
  { "mData": "name"},
  { "mData": "address"},
  { "mData": "contact"},
  { "mData": "phone"},
  { "mData": "region"},
  { "mData": "longitude"},
  { "mData": "latitude"},
      {
       "sClass": "td-status",
       "data": "status",
        "render": function (data) {
         if(data == 1){
           return `<span class="label label-success radius">合作中</span>`
          }else {
           return `<span class="label label-defaunt radius">停止合作</span>`
          }
        }
      },
      {
       "sClass": "td-manage",
       "data": "status",
        "render": function (data, type, full, meta) {
         var html = '';
          if(data == 1){
           html += `<a onClick="member_stop(this,${full['aid']})"  href="javascript:;" title="停止合作"  class="btn btn-xs btn-success">
            <i class="fa fa-check"></i></a>`
          }else{
           html += `<a style="text-decoration:none" class="btn btn-xs" onClick="member_start(this,${full['aid']})" href="javascript:;"
            title="开启合作"><i class="fa fa-close"></i></a>`
          }
          html += `<a title="编辑" onclick="member_edit(${full['aid']})" href="javascript:;"  class="btn btn-xs btn-info" >
            <i class="fa fa-edit"></i>
          </a>
          <a title="删除" href="javascript:;"  onclick="member_del(this,${full['aid']})" class="btn btn-xs btn-warning" >
            <i class="fa fa-remove"></i>
          </a>`
          return html;
        }
      }
 ]
  });

有的时候在表格的td里面需要再次渲染标签，就会用到 render方法 ，它接收四个参数，如果实在不知道是什么参数，那就输出一下，会找到你想要的。

然后是后端接口代码

 

public function cooperation_list(Request $request)
{
    if (Request::instance() -> isAjax()){
        //接收参数
        $data = $request->param();
        $cooa = new CooperativeAddr();
        //获取Datatables发送的参数 必要
        $draw = $data['draw']; //这个值直接返回给前台
        $where = array();
        //搜索框
        $search = trim($data['search']['value']); //获取前台传过来的过滤条件
        if(strlen($search) > 0) {
        $where['aid|longitude|latitude|name|address|contact|phone'] = array('like','%'.$search.'%');
        }
        //定义查询数据总记录数sql
        $recordsTotal = $cooa->where('isdelete',0)->count();
        //定义过滤条件查询过滤后的记录数sql
        $recordsFiltered = $cooa->where($where)->where('isdelete',0)->count();
        //排序条件
        $orderArr = [1=>'aid', 2=>'rid'];
        //获取要排序的字段
        $orderField = (empty($orderArr[$data['order']['0']['column']])) ? 'aid' : $orderArr[$data['order']['0']['column']];
        //需要空格,防止字符串连接在一块
        $order = $orderField.' '.$data['order']['0']['dir'];
        //按条件过滤找出记录
        $result = [];
        //备注:$data['start']起始条数 $data['length']查询长度
        $result = $cooa->alias('a')
            ->where($where)
            -> join('dawj_cooperative_region r','a.rid = r.rid')
            -> field('aid,longitude,latitude,name,address,region,status,contact,phone')
            ->where('isdelete',0)
            ->order($order)
            ->limit(intval($data['start']), intval($data['length']))
            ->select();
        //处理数据
        if(!empty($result)) {
            foreach ($result as $key => $value) {
                $result[$key]['recordsFiltered'] = $recordsFiltered;
            }
        }
        //拼接要返回的数据
        $list = array(
            "draw" => intval($draw),
            "recordsTotal" => intval($recordsTotal),
            "recordsFiltered"=>intval($recordsFiltered),
            "data" => $result,
        );
        return json($list);
    }
    $region_list = CooperativeRegion::where('isdel',0)
                 -> field('rid,region')
                 -> select();
    $view = new View();
    return $view->fetch('cooperation_list',['region_list' => $region_list]);

}

 

 

 

这段代码相信用过ThinkPHP5框架的都会懂，不做太多解释

然后，后端返回的字段必须和前端需要的参数一致，就是前端在实例化时写在aoColums里面的data数据，后端一定要返回

最后贴一张请求的参数，参数非常的多，当然如果没有你想要传递的参数，也可以在ajax请求的时候附带额外的参数，比如时间段

没有修改什么，就是看一下修改的时候，CSDN有没有修改时间而已