今天一白天全耗在這個問題上了，知乎2小時除外... 現在19:28分，記下來以備后查。
問題描述：從后台數據庫查詢人員信息，1w多條，使用一個好看的基於bootstrap的模板 Bootstrap-Admin-Template-master ，其中集成了datatable組件，使用默認配置將后台php查詢的數據給到前端網頁，發現速度比較慢，20s左右，急脾氣的人會砸電腦，為了愛護顯示器起見，解決它。
思路：1、修改后台php查詢代碼，實現分頁，前端要看那一頁就把那頁的數據查出來給他，分頁的數據不過幾十條，應該秒開了吧；
2、研究datatable組件，有否選項支持異步查詢。
動手歷史：先按照第1個辦法來，修改后台thinkphp的indexAction
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 }
前端頁面如下：
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，使用
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,強制重新初始化；
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）的生活。