Datatables结合struts2+spring+mybatis实现服务器分页，解决大数据量加载缓慢

更多datatables在http://dt.thxopen.com/ 欢迎大家来做客

在项目中用到datatables比较多，但是当datatables加载超过1000多的时候就会出现有点缓慢的的样子，这个时候如果继续增加数据量让datatables去处理，那会是一个让人抓狂的事情，幸好datatables也提供了大数据量的解决办法，下面我结合我的项目，来讲讲怎么用datatables加载大数据量问题。
首先看html代码：

1. <table id="meterDataExp" width="100%" class="display">
2. <thead>
3. <tr>
4. <th>
5. 宿舍信息
6. </th>
7. <th>
8. 表记编码
9. </th>
10. <th>
11. 上次读数
12. </th>
13. <th>
14. 本次读数
15. </th>
16. <th>
17. 实际用量
18. </th>
19. <th>
20. 月补用量
21. </th>
22. <th>
23. 缴费状态
24. </th>
25. <th>
26. 抄表日期
27. </th>
28. <th>
29. 手动/自动
30. </th>
31. </tr>
32. </thead>
33. <tbody>
34. </tbody>
35. </table>

复制代码

js代码：

1. //初始化所有用户数据
2. oTable =$('#meterDataExp').dataTable({
3. "bProcessing": true, //显示是否加载
4. "sScrollX":"100%",
5. "bJQueryUI": true,
6. "sScrollY": 230,
7. "bDestroy":true,
8. "iDisplayLength":10,
9. //"aaSorting": [[ 2, "desc" ]],//给列表排序 ，第一个参数表示数组 。4 就是css grade那列。第二个参数为 desc或是asc
10. "sScrollXInner": "100%",
11. "sPaginationType": "full_numbers",
12. "sAjaxSource":"getAllMeterDataInfo.action",
13. "bSort": false, //关闭排序
14. <font color="#ff0000"> "bServerSide":true,//打开服务器模式，这个是最重要的</font>
15. "bLengthChange":false, //关闭每页显示多少条数据
16. "fnServerData":retrieveData,//自定义数据获取函数
17. "aoColumns": [
18. { "mDataProp": "name"},
19. { "mDataProp": "meterNo"},
20. { "mDataProp": "startedNum"},
21. { "mDataProp": "endedNum" },
22. { "mDataProp": "amount"},
23. { "mDataProp": "limitAmount"},
24. { "mDataProp": "state"},
25. { "mDataProp": "readingDate"},
26. { "mDataProp": "dataType"}
27. ]
29. });

复制代码

struts配置：

1. <action name="getAllMeterDataInfo"
2. class="com.daja.paymp.presentation.action.meter.MeterDataAction" method="findAllMeterData">
3. <result name="success" type="json"></result>
4. </action>

复制代码

action代码：首先要定义这么几个参数，因为你开启了datatables的服务器模式，你对datatables的每个操作，他都会想服务器发送一个请求

1. //datatables服务器分页
2. private String sEcho ; //包含表格的一些信息，需要不变的传回去
3. private String iDisplayStart ; //当你点击下一页或者页数的时候会传到后台的值
4. private String iDisplayLength ; //默认是传10
5. private String returnMessage ; //这个是我定义的一个json 字符串 传回给datatables用来显示
6. private String sSearch ; //这个是datatables表头上的搜索框传来的值

复制代码

1. public String findAllMeterData() throws Exception {
2. //从后台获取该表总共有多少条记录
3. String iTotalRecords = meterPageService.getResultNum("PT0000","").toString();
4. //
5. String iTotalDisplayRecords = "0";
7. //定义一个json格式的数据
8. JSONObject Alltempobj =JSONObject.fromObject("{}");
9. JSONObject tempobj = JSONObject.fromObject("{}");
10. JSONArray tempArray = JSONArray.fromObject("[]");
11. meterDataList = new ArrayList<MeterData>();
12. meterDataDtoList = new ArrayList<MeterDataDTO>();
14. //从前台接受搜索框里的值
15. if(sSearch != null && !sSearch.trim().equals("")){
16. iTotalDisplayRecords =meterPageService.getResultNum("PT0000",sSearch).toString();
17. meterDataList = meterPageService.selectMeterDataForPage("PT0000",sSearch, iDisplayStart, iDisplayLength);
18. }else{
19. iTotalDisplayRecords = iTotalRecords;
20. meterDataList = meterPageService.selectMeterDataForPage("PT0000","", iDisplayStart, iDisplayLength);
21. }
23. Alltempobj.put("aaData",
24. meterDataList);
25. Alltempobj.put("iTotalRecords",iTotalRecords);
26. Alltempobj.put("iTotalDisplayRecords",iTotalDisplayRecords);
27. Alltempobj.put("sEcho",sEcho);
28. returnMessage = JSONObject.fromObject(Alltempobj).toString();
30. return SUCCESS;
31. }

复制代码

service层方法：由于这里是用的mybatis，我直接贴sql语句

1. <!-- 根据条件或者条件为空获取过滤的记录数 -->
2. <select id="getResultNum" resultType="map" parameterType="string">
3. select count(*) as resultNum from payment_log
4. where customer_no||meter_no||customer_name||operator like CONCAT(CONCAT('%',#{search}),'%')
5. order by accdate desc
6. </select>

复制代码

1. <select id="selectMeterDataForPage" parameterType="map" resultType="com.daja.paymp.domain.model.meter.MeterData">
2. <![CDATA[
3. select tt."positionBuild.name",tt."positionDorm.name",tt.id,tt.meterNo,tt.customerNo,tt.readingDate,tt.startedNum,tt.endedNum,
4. tt.consNum,tt.limitNum,tt.state,tt.dataType from
5. (SELECT
6. PB.NAME as "positionBuild.name",
7. PD.NAME as "positionDorm.name",
8. T.ID as id,
9. T.METER_NO as meterNo,
10. T.CUSTOMER_NO as customerNo,
11. T.READING_DATE as readingDate,
12. T.STARTED_NUM as startedNum,
13. T.ENDED_NUM as endedNum,
14. T.CONS_NUM as consNum,
15. T.LIMIT_NUM as limitNum,
16. T.STATE as state,
17. ROWNUM as rum,
18. (case when T.DATA_TYPE='1' then '自动' when T.DATA_TYPE='2' then '手动' end)as dataType
19. FROM METER_DATAT ,METER M,PAYMENT_TYPE P,DORM_METER DM, POSITION_DORM PD,POSITION_BUILD PB
20. where T.METER_NO = M.NO
21. and M.TYPE = P.ID
22. and M.NO = DM.METERID
23. and DM.DORMID = PD.ID
24. and PD.BUILDID = PB.ID
25. and P.CODE=#{code}
26. and pd.name||T.METER_NO||T.READING_DATE||(case when T.DATA_TYPE='1' then '自动' when T.DATA_TYPE='2' then '手动' end)like CONCAT(CONCAT('%',#{search}),'%')
27. and rownum <= #{end}) tt
28. where tt.rum > #{start}
30. ]]>
31. </select>

复制代码

虽然到这里解决了大数据量，但是这个大数据量也是有上限的，现在我的数据库里有170万条数据，比起我以前一次性加载那效率是提高了很多，但是问题还是有点点，毕竟数据量还是比较大的，点下一页的响应时间大概在3秒左右（局域网），如果直接点末页再点首页，这个时间又会长点。

总的来说 如果数据超过了1000 但是有没有上万 ，那么这个解决办法已经够用了，现在要做的就是对百万级，千万级数据的优化，如果有朋友也是在犯愁，希望我们一起交流交流

 

更多datatables在http://bbs.sailit.cn 欢迎大家来做客

评论

5 楼 skyyan 2017-02-16  

请问 如果自定义多个查询条件 如何 处理呢

4 楼 ssy341 2013-08-13  

laotouliulei 写道

正常的dataTable.js插件是用类似
"oLanguage": {
          "sSearch": "搜索:",
          "sProcessing": "请等待...",
          "sLengthMenu": "每页显示 _MENU_ 条记录",
          "sZeroRecords": "没有找到相关条目",
              "sInfo": "显示第  _START_ 条到第  _END_ 条记录,一共  _TOTAL_ 条记录",
          "sInfoEmpty": "显示0条记录",
          "oPaginate": {
           "sPrevious": " 上一页 ",
           "sNext":     " 下一页 ",
           "sFirst":"首页",
           "sLast":"末页"
           }
          },这样写上一页下一页，
请问你怎么写上一页和下一页啊？？？

你这问的上一页和下一页是什么意思，没懂
你可以加群：170222260 讨论

3 楼 laotouliulei 2013-07-18  

正常的dataTable.js插件是用类似
"oLanguage": {
          "sSearch": "搜索:",
          "sProcessing": "请等待...",
          "sLengthMenu": "每页显示 _MENU_ 条记录",
          "sZeroRecords": "没有找到相关条目",
              "sInfo": "显示第  _START_ 条到第  _END_ 条记录,一共  _TOTAL_ 条记录",
          "sInfoEmpty": "显示0条记录",
          "oPaginate": {
           "sPrevious": " 上一页 ",
           "sNext":     " 下一页 ",
           "sFirst":"首页",
           "sLast":"末页"
           }
          },这样写上一页下一页，
请问你怎么写上一页和下一页啊？？？

2 楼 ssy341 2013-01-19  

y3wegy 写道

你的参数是如果传到action里面的?怎么没有set方法?

我只是没有贴出来而已，geter seter方法肯定要写啊

1 楼 y3wegy 2012-10-22  

你的参数是如果传到action里面的?怎么没有set方法?