thinkphp+datatables+ajax 大量数据服务器端查询
今天一白天全耗在这个问题上了，知乎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）的生活。
thinkphp+datatables+ajax 大量数据服务器端查询的更多相关文章
- ThinkPHP中ajax提交数据
最近在做项目时遇到了一些需要从页面用ajax提交数据到后台的操作,无奈本人技术有限,网上苦寻,研究了一下ajax和thinkPHP的结合,黄天不负苦心人,终于搞定了. 闲话少叙,进入正题:我需要从页面 ...
- ajax+php数据增加查询获取删除
前段代码部分其实前面已经有写出但是做一点修改所以还是贴出来,可能大家看到代码回不理解,看完图我想大家会理解我为什么这么写了,这和前端布局有关系的,先列出内容在选择内容删除或修改 <!DOCTYP ...
- thinkphp使用ajax
thinkphp使用ajax和之前使用ajax的方法一样,不同点在于之前的ajax中的url指向了一个页面,而thinkphp里面的url需要指向一个操作方法. 一.thinkphp使用ajax返回数 ...
- TP框架---thinkphp使用ajax
thinkphp使用ajax和之前使用ajax的方法一样,不同点在于之前的ajax中的url指向了一个页面,而thinkphp里面的url需要指向一个操作方法. 一.thinkphp使用ajax返回数 ...
- ThinkPHP框架 【 AJAX方法返回 】 例子：简单添加一条数据 和 查询一个表里的数据
注:thinkphp使用ajax和之前使用ajax的方法一样,不同点在于之前的ajax中的url指向了一个页面,而thinkphp里面的url需要指向一个操作方法. 在模块控制器Controller文 ...
- ASP.NET前台table通过Ajax获取绑定后台查询的json数据
上一篇<ASP.NET前台html页面AJAX提交数据后台ashx页面接收数据>写了前台提交数据后台保存到数据库,数据处理以后用户肯定要查询.接下来就写一个前台table通过ajax J ...
- vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询
vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询 基于element Transfer http://element-cn.eleme.io/#/zh-CN/comp ...
- ajax 判断账户密码 调取数据模糊查询 时钟
一.判断账户密码 <Login.html> <head> <meta http-equiv="Content-Type" content=" ...
- DataTables ajax + bootstrap 分页/搜索/排序/常见问题
最近学校的网站建设需要,尝试使用了下Jquery dataTables控件,接触过C#的人都知道,C#中也含有一个DataTable,但它和我们今天讨论的东西无关 我使用的是官网最新的DataTabl ...
随机推荐
- [转] gdb的基本工作原理
转自: http://www.spongeliu.com/linux/howgdbwork/ 还是面某M的时候,面试官问我:“用过gdb么?” 答:“用过,调了两年bug了”.“那好,给我解释下gdb ...
- RHEL7和RHEL6的主要变化
RHEL7和RHEL6的主要变化 RHEL7 RHEL6 文件系统 XFS EXT4 内核版本 3.10.x-x系列 2.6.x-x系列 内核名称 Maipo Santiago 发布时间 2014 ...
- 《node.js开发指南》读书笔记（一）
在开发时如果修改了js内容,不能通过刷新浏览器直接看到效果,必须通过重启nodejs程序才能看到,这样显然不利于开发调试,supervisor可以实现这个功能,监视对代码的改动,并自动重启nodejs ...
- js 获取元素在页面上的偏移量的最佳方式
使用js制作效果时,我们常常要获取某个元素在页面上的偏移量(例如tip提示框功能).而获取偏移量可以直接获取相对于document的偏移量,也可以获取相对与视口的偏移量(viewpoint)加上页面滚 ...
- linux 第三天11讲
1.linux下的shell 查看目前使用的是哪种shell env [该命令可以显示当前操作系统的环境变量] env | more chsh -s 输入新的shell 如:/bin/csh shel ...
- 模拟键盘输入首先要用到一个API函数：keybd_event
转自:http://www.cnblogs.com/cpcpc/archive/2011/02/22/2123055.html 模拟键盘输入首先要用到一个API函数:keybd_event. 模拟按键 ...
- angular启动过程分析
启动过程 步骤一 用自执行函数在代码完成加载后立即执行 function(window, document, undefined) 在window上暴露一个唯一的全局对象angular,Line250 ...
- Memcached 分布式缓存系统部署与调试
Memcache 分布式缓存系统部署与调试 工作机制:通过在内存中开辟一块区域来维持一个大的hash表来加快页面访问速度,和数据库是独立的;目前主要用来缓存数据库的数据;存放在内存的数据通过LRU算法 ...
- PHPCMS v9修改栏目或者单页没有权限
问题: 普通管理员没有权限修改栏目,只有超级管理员才有权限修改,凡是非超级管理员,设置栏目权限后只能添加栏目,不能对栏目进行修改和删除操作,提示您没有权限操作该项这使系统的一个BUG. 一.对于普 ...
- 1105ecos笔记
1 dbschema <?php$db['item']=array ( 'columns' => array ( 'item_id' => array ( 'type' => ...