thinkphp+datatables+ajax 大量數據服務器端查詢

今天一白天全耗在這個問題上了，知乎2小時除外... 如今19:28分，記下來以備後查。

 

問題描述：從後臺數據庫查詢人員信息，1w多條，使用一個好看的基於bootstrap的模板 Bootstrap-Admin-Template-master ，其中集成了datatable組件，使用默認配置將後臺php查詢的數據給到前端網頁，發現速度比較慢，20s左右，急脾氣的人會砸電腦，爲了愛護顯示器起見，解決它。

思路：一、修改後臺php查詢代碼，實現分頁，前端要看那一頁就把那頁的數據查出來給他，分頁的數據不過幾十條，應該秒開了吧；

二、研究datatable組件，有否選項支持異步查詢。

動手歷史：先按照第1個辦法來，修改後臺thinkphp的indexAction

 1      function index3()
 2     {
 3          $person = D('BlacklistPerson');
 4         import('ORG.Util.Page'); //  導入分頁類
 5          // $count      = $person->where($map)->count();//總數量
 6           $count= $person-> count("id");
 7          $listRows='7';
 8          $p       =  new Page( $count, $listRows);
 9           //  實例化分頁類 傳入總記錄數和每頁顯示的條數
10           $p->setConfig('theme', '<li><a>%totalRow% %header%</a></li> %upPage% %downPage% %first%  %prePage%  %linkPage%  %nextPage% %end% ');
11          $page       =  $p->show(); //  分頁顯示輸出
12           $this->assign('page', $page); //  賦值分頁輸出  
13 
14          $fields='id,name,dept_com,address,origin,cardNum,filingTime';
15 
16          $list =  $person->field( $fields)->limit( $p->firstRow, $p->listRows)->select();
17          $this->assign('rlist',  $list);     
18          $this->display();
19 
20         dump( $person->getLastSql());
21         dump( $count);
22         dump( $p->firstRow);
23         dump( $p->listRows);
24         dump( $list);     
25 

26     } 

 前端頁面以下：

 1  < head >
 2  < script  src ="__PUBLIC__/jquery-2.1.3/jquery-2.1.3.min.js" ></ script >
 3  < script  src ="__PUBLIC__/Bootstrap-Admin-Template-master/dist/assets/js/jquery.dataTables.min.js" ></ script >
 4  <!--  <script src="../../../Public/jquery-2.1.3/jquery-2.1.3.min.js"></script>
 5  <script src="../../../Public/Bootstrap-Admin-Template-master/dist/assets/js/jquery.dataTables.min.js"></script>  -->
 6  </ head >
 7 
 8 
 9 
10      < table  id ="example"  class ="display"  cellspacing ="0"  width ="100%" >
11                  < thead >
12                      < tr >
13                          < th >id </ th >
14                          < th >name </ th >
15                          < th >dept_com </ th >
16                          < th >cardNum </ th >
17                      </ tr >
18                  </ thead >
19 
20                  < tfoot >
21                      < tr >
22                          < th >id </ th >
23                          < th >name </ th >
24                          < th >dept_com </ th >
25                          < th >cardNum </ th >
26 
27                      </ tr >
28                  </ tfoot >
29      </ table >
30 
31 
32 
33 
34 
35 
36  < script >
37     $(document).ready( function() {
38     $('#example').DataTable( {
39         "processing":  true,
40         "serverSide":  true,
41         "ajax": "__PUBLIC__/scripts/server_processing.php"
42     } );
43 } );

44 </script> 

 成功了，可是現實效果很醜，徹底不和模板裏datatable那近乎完美的美工同一個世界；對於本人這樣的css小白加懶蟲加半個強迫症，實在不能接受；

走第2種方法試試；

datatable這麼牛的組件確定有簡單的設置來支持ajax之類的異步技術吧，跑去datatable.net一陣翻騰，還真有：http://datatables.net/examples/data_sources/server_side.html ;

循序漸進試試，有兩個比較煩人的問題，一是使用此方法須要用json格式，thinkphp後端返回的是數組，encode_json就好了吧，還不行，仔細一看datatable要求的json格式須要多幾個參數，原thinkphp查出的數據數組只是其「data」：「....」部分，只傳data會報錯，http://datatables.net/manual/tech-notes/1；這幾個參數貌似也不復雜，總條數，刪選條數之類的，直接用官網給的服務端腳本吧，server_processing.php，ssp.class.php，前者指定服務器參數和查詢列，後者是實際查詢操做類；好，查出來了，給前臺的datatable，使用

1 <script>
2     $(document).ready( function() {
3     $('#example').DataTable( {
4         "processing":  true,
5         "serverSide":  true,
6         "ajax": "__PUBLIC__/scripts/server_processing.php"
7     } );
8 } );

9 </script> 

 竟然報錯，說是example已經初始化了，不能再初始化，折騰了三四個小時了，大冷天都冒汗了你給我看這個？莫非要讓我去翻出模板怎麼封裝的datatable，修改默認的初始方式？不至於這麼不人道，錯誤扔給度娘，竟然官網就有解答，真是良心網站；http://datatables.net/manual/tech-notes/3；按教程用retrieve: true,強制從新初始化；

 1 <script>
 2     $(document).ready( function() {
 3     $('#dataTable2').DataTable( {
 4          // 明知DataTable已經初始化了，仍強制從新調整初始化選項
 5          retrieve:  true,
 6         "processing":  true,
 7         "serverSide":  true,
 8         "ajax": "__PUBLIC__/scripts/server_processing.php",
 9         "columnDefs": [ {
10         "targets": [ 6 ],
11         "data":  null,
12         "defaultContent": "i am not empty",
13         "render":  function ( data, type, row ) {
14              return "<a href=\"__URL__/more/id/"+row[0]+"\" class=\"btn btn-info btn-xs btn-grad\">查看</a>";
15         }
16   } ]
17     } );
18 } );

19 </script> 

最後一個問題了，俺得加個明細按鈕啊，原來模板中是傳list給volist方法便利，拼接個超鏈出來，如今咋辦，datatable自身怎麼指定列的動態值，繼續翻官網，找到 http://datatables.net/reference/option/columns.data ，不錯，有個render方法，能夠拿來用；因而就有了上面的第14行。

 

測試刷刷的秒開，打完收工，結束一天充（ku）實（bi）的生活。