DataTable 服务器端动态分页

最新推荐文章于 2021-02-23 07:28:41 发布

原创最新推荐文章于 2021-02-23 07:28:41 发布 · 7.3k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

DataTable 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用服务器端动态分页来提高DataTable性能。通过在JavaScript中初始化表单并设置DataTable参数，如`sAjaxSource`、`bServerSide`，以及自定义`fnServerData`回调函数来实现分页。在后台，接收到分页参数后根据SQL查询进行数据处理。此外，还展示了如何在`initAsyncPagingDT`函数中添加额外参数传递。

原始的dataTable显示表单：一次性查找所需的所有数据（但对于若查找的数据有上万条效率太低）

所以用服务器端动态分页：一次访问几条，多次访问后台数据

（1）在js中初始化表单

oTable = initAsyncPagingDT(tableObj, url, cols, colDefs);

/**
* 初始化普通表格
* @param tableObj table对象
* @param url 请求地址
* @param cols 列
* @param colDefs 列设置
* @param fixedColumns 锁定列
* @param sScrollX 横向滚动条
* @param bServerSide 服务器模式
*/

（2）在后台获取参数 String pagingData //它是以json字符串的形式

protected Map<String, Object> swapParam(String pagingData){
        Map<String, Object> params = new HashMap<String, Object>();
        if(!StringUtil.isEmpty(pagingData)){
            JSONObject jsonObject = JSONObject.fromObject(pagingData);  
            int iDisplayStart = (Integer) jsonObject.get("iDisplayStart");
            int iDisplayLength = (Integer) jsonObject.get("iDisplayLength");
            int sEcho = (Integer) jsonObject.get("sEcho");  

            params.put("sEcho", sEcho);
            params.put("start", iDisplayStart);
            params.put("length", iDisplayLength);
        }
        return params;
    }

//start 和length是SQL语句查找所需要的：从start条开始，查找length条

在Mapper 中的sql查找语句：需要2个

1.所需查找的总的个数 number接收

	<select id="queryContentCount" resultType="java.lang.Integer" >
		select 
			count(*) 
		from t_bus_content
  	</select>

2.所需查找列表信息（10条rows参数设置的） list接收

<select id="queryContentByParam" resultType="java.util.HashMap" parameterType="java.util.HashMap">
 	select 
			id, uuid, title
        from t_bus_content
        order by pubtime desc
        <if test="start !=null and length != null ">
		limit #{start} , #{length}
		</if>
  	</select>

（2）后台返回的参数信息

resultMap.put("sEcho", paramMap.get("sEcho"));

resultMap.put("iTotalRecords", number);

resultMap.put("iTotalDisplayRecords", number);

resultMap.put("aaData", list);

return return convertToJsonData(resultMap);

//将resultMap转为json字符串形式

/**
	 * list转为json字符串
	 * @param list
	 * @return
	 */
	protected String convertToJsonData(Object list) {
		try {
			ObjectMapper mapper = new ObjectMapper();
			// mapper.setDateFormat(new
			// SimpleDateFormat(DateTime.DATE_FORMAT_DATEONLY));
			String liststr = mapper.writeValueAsString(list);
			return liststr;
		} catch (JsonProcessingException jsone) {
			throw new RuntimeException(jsone);
		}
	}

分页时外加参数的传递

在 initAsyncPagingDT 中加 "fnServerParams": serOtherParams || null

var initAsyncPagingDT =function(tableObj, url, cols, colDefs, fixedColumns, sScrollX, rows，serOtherParams )

function serOtherParams(aoData) {
    aoData.push(
        {
            "name": "cpyUUID",
            "value": $('#ratio_cpyUUID').val()
        },{
            "name": "compUUID",
            "value": $('#ratio_compUUID').val()
        }
    );
}

在后台获取参数 String pagingData 中有