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）的生活。