thinkphp+datatables+ajax 大量数据服务器端查询
2015-11-26 20:08
1016 查看
今天一白天全耗在这个问题上了,知乎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 // 实例化分页类 传入总记录数和每页显示的条数
$p->setConfig('theme', '<li><a>%totalRow% %header%</a></li> %upPage% %downPage% %first% %prePage% %linkPage% %nextPage% %end% ');
$page = $p->show();// 分页显示输出
$this->assign('page',$page);// 赋值分页输出
$fields='id,name,dept_com,address,origin,cardNum,filingTime';
$list = $person->field($fields)->limit($p->firstRow,$p->listRows)->select();
$this->assign('rlist', $list);
$this->display();
dump($person->getLastSql());
dump($count);
dump($p->firstRow);
dump($p->listRows);
dump($list);
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
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>dept_com</th>
<th>cardNum</th>
</tr>
</thead>
<tfoot>
<tr>
<th>id</th>
<th>name</th>
<th>dept_com</th>
<th>cardNum</th>
</tr>
</tfoot>
</table>
<script>
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "__PUBLIC__/scripts/server_processing.php"
} );
} );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,使用
<script>
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "__PUBLIC__/scripts/server_processing.php"
} );
} );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": [ {
"targets": [ 6 ],
"data": null,
"defaultContent": "i am not empty",
"render": function ( data, type, row ) {
return "<a href=\"__URL__/more/id/"+row[0]+"\" class=\"btn btn-info btn-xs btn-grad\">查看</a>";
}
} ]
} );
} );19 </script>
最后一个问题了,俺得加个明细按钮啊,原来模板中是传list给volist方法便利,拼接个超链出来,现在咋办,datatable自身怎么指定列的动态值,继续翻官网,找到 http://datatables.net/reference/option/columns.data ,不错,有个render方法,可以拿来用;于是就有了上面的第14行。
测试刷刷的秒开,打完收工,结束一天充(ku)实(bi)的生活。
问题描述:从后台数据库查询人员信息,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 // 实例化分页类 传入总记录数和每页显示的条数
$p->setConfig('theme', '<li><a>%totalRow% %header%</a></li> %upPage% %downPage% %first% %prePage% %linkPage% %nextPage% %end% ');
$page = $p->show();// 分页显示输出
$this->assign('page',$page);// 赋值分页输出
$fields='id,name,dept_com,address,origin,cardNum,filingTime';
$list = $person->field($fields)->limit($p->firstRow,$p->listRows)->select();
$this->assign('rlist', $list);
$this->display();
dump($person->getLastSql());
dump($count);
dump($p->firstRow);
dump($p->listRows);
dump($list);
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
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>dept_com</th>
<th>cardNum</th>
</tr>
</thead>
<tfoot>
<tr>
<th>id</th>
<th>name</th>
<th>dept_com</th>
<th>cardNum</th>
</tr>
</tfoot>
</table>
<script>
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "__PUBLIC__/scripts/server_processing.php"
} );
} );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,使用
<script>
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "__PUBLIC__/scripts/server_processing.php"
} );
} );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": [ {
"targets": [ 6 ],
"data": null,
"defaultContent": "i am not empty",
"render": function ( data, type, row ) {
return "<a href=\"__URL__/more/id/"+row[0]+"\" class=\"btn btn-info btn-xs btn-grad\">查看</a>";
}
} ]
} );
} );19 </script>
最后一个问题了,俺得加个明细按钮啊,原来模板中是传list给volist方法便利,拼接个超链出来,现在咋办,datatable自身怎么指定列的动态值,继续翻官网,找到 http://datatables.net/reference/option/columns.data ,不错,有个render方法,可以拿来用;于是就有了上面的第14行。
测试刷刷的秒开,打完收工,结束一天充(ku)实(bi)的生活。
相关文章推荐
- neo4j-neoclient-example之movies 推荐
- 关于thinkphp中的验证码生成与刷新
- PHP出现Cannot modify header information问题的解决方法
- 【php wamp的配置】
- php Socket通信
- laravel whereRaw 和 where(DB::raw(''))
- 解析提高PHP执行效率的50个技巧
- 究极!ThinkPHP 3.2.2 框架源码逐行分析(一)
- PHP实现从1累加到100(1+2+….+100=)的几种思路
- 用PHP实现一个Amazon SES的代理服务器
- 完美解决php验证码session不同步的问题
- PHP 9 大缓存技术总结
- PHP从某个关联数组中取出某一列KEY的值并放入另一个数组中
- 兔子-查看当前php的版本
- Yii 基础入门
- php判断文件存在是用file_exists 还是 is_file
- pure-ftpd 虚拟用户连接报错Sorry, invalid address given
- yum安装ftp及详细配置及日志设置
- PHP Yii框架 命令行创建应用(shop)
- PHP导出Excel