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

最新推荐文章于 2023-11-30 17:19:43 发布

54341

最新推荐文章于 2023-11-30 17:19:43 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： datatables 文章标签： datatables struts 服务器 spring string

本文链接：https://blog.youkuaiyun.com/keithssy/article/details/8004142

datatables 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用datatables处理大数据量的方法，通过开启服务器模式、禁用客户端排序等功能，有效地提高了处理上千条数据的效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

首先看html代码：

<table id="meterDataExp" width="100%" class="display">
<thead>
<tr>
<th>
宿舍信息
</th>
<th>
表记编码
</th>
<th>
上次读数
</th>
<th>
本次读数
</th>
<th>
实际用量
</th>
<th>
月补用量
</th>
<th>
缴费状态
</th>
<th>
抄表日期
</th>
<th>
手动/自动
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

复制代码

js代码：

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

复制代码

struts配置：

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

复制代码

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

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

复制代码

public String findAllMeterData() throws Exception {
//从后台获取该表总共有多少条记录
String iTotalRecords = meterPageService.getResultNum("PT0000","").toString();
//
String iTotalDisplayRecords = "0";
//定义一个json格式的数据
JSONObject Alltempobj = JSONObject.fromObject("{}");
JSONObject tempobj = JSONObject.fromObject("{}");
JSONArray tempArray = JSONArray.fromObject("[]");
meterDataList = new ArrayList<MeterData>();
meterDataDtoList = new ArrayList<MeterDataDTO>();
//从前台接受搜索框里的值
if(sSearch != null && !sSearch.trim().equals("")){
iTotalDisplayRecords = meterPageService.getResultNum("PT0000",sSearch).toString();
meterDataList = meterPageService.selectMeterDataForPage("PT0000",sSearch, iDisplayStart, iDisplayLength);
}else{
iTotalDisplayRecords = iTotalRecords;
meterDataList = meterPageService.selectMeterDataForPage("PT0000","", iDisplayStart, iDisplayLength);
}
Alltempobj.put("aaData",
meterDataList );
Alltempobj.put("iTotalRecords",iTotalRecords);
Alltempobj.put("iTotalDisplayRecords",iTotalDisplayRecords);
Alltempobj.put("sEcho",sEcho);
returnMessage = JSONObject.fromObject(Alltempobj).toString();
return SUCCESS;
}

复制代码

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

<select id="getResultNum" resultType="map" parameterType="string">
select count(*) as resultNum from payment_log
where customer_no||meter_no||customer_name||operator like CONCAT(CONCAT('%',#{search}),'%')
order by accdate desc
</select>

复制代码

<select id="selectMeterDataForPage" parameterType="map" resultType="com.daja.paymp.domain.model.meter.MeterData">
<![CDATA[
select tt."positionBuild.name",tt."positionDorm.name",tt.id,tt.meterNo,tt.customerNo,tt.readingDate,tt.startedNum,tt.endedNum,
tt.consNum,tt.limitNum,tt.state,tt.dataType from
(SELECT
PB.NAME as "positionBuild.name",
PD.NAME as "positionDorm.name",
T.ID as id,
T.METER_NO as meterNo,
T.CUSTOMER_NO as customerNo,
T.READING_DATE as readingDate,
T.STARTED_NUM as startedNum,
T.ENDED_NUM as endedNum,
T.CONS_NUM as consNum,
T.LIMIT_NUM as limitNum,
T.STATE as state,
ROWNUM as rum,
(case when T.DATA_TYPE='1' then '自动' when T.DATA_TYPE='2' then '手动' end) as dataType
FROM METER_DATA T ,METER M,PAYMENT_TYPE P,DORM_METER DM, POSITION_DORM PD,POSITION_BUILD PB
where T.METER_NO = M.NO
and M.TYPE = P.ID
and M.NO = DM.METERID
and DM.DORMID = PD.ID
and PD.BUILDID = PB.ID
and P.CODE=#{code}
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}),'%')
and rownum <= #{end}) tt
where tt.rum > #{start}
]]>
</select>