标签：
今天一白天全耗在这个问题上了，知乎2小时除外... 现在19:28分，记下来以备后查。
问题描述：从后台数据库查询人员信息，1w多条，使用一个好看的基于bootstrap的模板 Bootstrap-Admin-Template-master ，其中集成了datatable组件，使用默认配置将后台php查询的数据给到前端网页，发现速度比较慢，20s左右，急脾气的人会砸电脑，为了爱护显示器起见，解决它。
思路：1、修改后台php查询代码，实现分页，前端要看那一页就把那页的数据查出来给他，分页的数据不过几十条，应该秒开了吧；
2、研究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）的生活。
thinkphp+datatables+ajax 大量数据服务器端查询
标签：
原文地址：http://www.cnblogs.com/javajava/p/4998787.html
