最近在寫後臺的資料管理，有的時候由於資料過多需要使用分頁功能，而我作為一個前端，由於用習慣了非同步請求的功能在使用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請求的時候附帶額外的引數，比如時間段