`
ssy341
  • 浏览: 58379 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
文章分类
社区版块
存档分类
最新评论

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方法?
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics