今天一白天全耗在这个问题上了，知乎2小时除外... 现在19:28分，记下来以备后查。

问题描述：从后台数据库查询人员信息，1w多条，使用一个好看的基于bootstrap的模板 Bootstrap-Admin-Template-master ，其中集成了datatable组件，使用默认配置将后台php查询的数据给到前端网页，发现速度比较慢，20s左右，急脾气的人会砸电脑，为了爱护显示器起见，解决它。

思路：1、修改后台php查询代码，实现分页，前端要看那一页就把那页的数据查出来给他，分页的数据不过几十条，应该秒开了吧；

2、研究datatable组件，有否选项支持异步查询。

动手历史：先按照第1个办法来，修改后台thinkphp的indexAction

  1.  1     function index3()
  2.  2     {
  3.  3         $person = D('BlacklistPerson');
  4.  4         import('ORG.Util.Page');// 导入分页类
  5.  5         // $count      = $person->where($map)->count();//总数量
  6.  6         $count=$person->count("id");
  7.  7         $listRows='7';
  8.  8         $p       = new Page($count,$listRows);
  9.  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.  1 <head>
  2.  2 <script src="__PUBLIC__/jquery-2.1.3/jquery-2.1.3.min.js"></script>
  3.  3 <script src="__PUBLIC__/Bootstrap-Admin-Template-master/dist/assets/js/jquery.dataTables.min.js"></script>
  4.  4 <!-- <script src="../../../Public/jquery-2.1.3/jquery-2.1.3.min.js"></script>
  5.  5 <script src="../../../Public/Bootstrap-Admin-Template-master/dist/assets/js/jquery.dataTables.min.js"></script> -->
  6.  6 </head>
  7.  7 
  8.  8 
  9.  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.  1 <script>
  2.  2     $(document).ready(function() {
  3.  3     $('#dataTable2').DataTable( {
  4.  4         //明知DataTable已经初始化了，仍强制重新调整初始化选项
  5.  5         retrieve: true,
  6.  6         "processing": true,
  7.  7         "serverSide": true,
  8.  8         "ajax": "__PUBLIC__/scripts/server_processing.php",
  9.  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 大量数据服务器端查询的更多相关文章

  1. ThinkPHP中ajax提交数据

    最近在做项目时遇到了一些需要从页面用ajax提交数据到后台的操作,无奈本人技术有限,网上苦寻,研究了一下ajax和thinkPHP的结合,黄天不负苦心人,终于搞定了. 闲话少叙,进入正题:我需要从页面 ...

  2. ajax+php数据增加查询获取删除

    前段代码部分其实前面已经有写出但是做一点修改所以还是贴出来,可能大家看到代码回不理解,看完图我想大家会理解我为什么这么写了,这和前端布局有关系的,先列出内容在选择内容删除或修改 <!DOCTYP ...

  3. thinkphp使用ajax

    thinkphp使用ajax和之前使用ajax的方法一样,不同点在于之前的ajax中的url指向了一个页面,而thinkphp里面的url需要指向一个操作方法. 一.thinkphp使用ajax返回数 ...

  4. TP框架---thinkphp使用ajax

    thinkphp使用ajax和之前使用ajax的方法一样,不同点在于之前的ajax中的url指向了一个页面,而thinkphp里面的url需要指向一个操作方法. 一.thinkphp使用ajax返回数 ...

  5. ThinkPHP框架 【 AJAX方法返回 】 例子：简单添加一条数据 和 查询一个表里的数据

    注:thinkphp使用ajax和之前使用ajax的方法一样,不同点在于之前的ajax中的url指向了一个页面,而thinkphp里面的url需要指向一个操作方法. 在模块控制器Controller文 ...

  6. ASP.NET前台table通过Ajax获取绑定后台查询的json数据

    上一篇<ASP.NET前台html页面AJAX提交数据后台ashx页面接收数据>写了前台提交数据后台保存到数据库,数据处理以后用户肯定要查询.接下来就写一个前台table通过ajax  J ...

  7. vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询

    vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询 基于element Transfer http://element-cn.eleme.io/#/zh-CN/comp ...

  8. ajax 判断账户密码 调取数据模糊查询 时钟

    一.判断账户密码 <Login.html> <head> <meta http-equiv="Content-Type" content=" ...

  9. DataTables ajax + bootstrap 分页/搜索/排序/常见问题

    最近学校的网站建设需要,尝试使用了下Jquery dataTables控件,接触过C#的人都知道,C#中也含有一个DataTable,但它和我们今天讨论的东西无关 我使用的是官网最新的DataTabl ...

随机推荐

  1. Java基础知识强化26（1）：Object类之Object类的概述

    1.Object类 类Object是类层次结构的根类,每个类都使用 Object作为超类.所有对象(包括数组)都实现这个类的方法 每个类直接或者间接继承自Object类   2.Object类无参构造 ...

  2. Verilog中锁存器与多路选择器

    Verilog中锁存器与多路选择器 Verilog是一种硬件描述语言,它代表的是硬件. Verilog代表的就是逻辑门和连接线. 对于一个always@(*)控制的块而言,只要块中的表达式包含的任意的 ...

  3. .net错误处理机制（转）

    asp.net 提供了4中错误机制:Page_Error事件>ErrorPage属性>Application_Error事件> <customErrors>配置项 ① P ...

  4. 去掉input【type=number】默认的上下箭头

    input::-webkit-inner-spin-button {-webkit-appearance: none;}input::-webkit-outer-spin-button {-webki ...

  5. memcache和activemq使用连接，然后close

    memcache和activemq使用连接,然后close

  6. Ecstore中Mootools和Jquery如何同时存在，解决冲突？

  7. jquery mini ui 学习

    1.mini.parse(); 将html标签解析为miniui控件.解析后,才能使用mini.get获取到控件对象. 2.mini.get(id);根据id获取控件对象. 3.grid.load() ...

  8. CodeSMART for VS.NET插件工具

    今天无聊,想起以前看过的微软的Visual Studio的插件,所以就找了找. 微软的Visual Studio本身就非常强大了,但是仍然有不足的地方,比如下面要介绍的我喜欢的代码格式化功能的这个插件 ...

  9. log4j的配置及使用

    用日志的好处: 可以长久的保存日志信息. 日志可以保存到:网络.文件.数据库 设置日志的级别. OFF Fatal – System.exit(0); - JVM, ERROR – 错误,模块错误. ...

  10. zxing生成和解析二维码

    今天忙了一天的二维码,用了QRcode和ZXing两个开源包.结果发现 ZXing比QRcode更好用一些,它直接可以定义二维码生成图案的大小,而QRcode生成的二维码是根据二维码包含的内容多少来定 ...