java实现layui静态表格分页_Layui.Table前台分页和后端真分页
当前信息发布的进程较为顺利，在前端应用中已成功集成并部署了 layui 的插件功能。项目即将结束时发现整体运行状态极为良好。在最终阶段需要处理多个分页列表时，默认遵循文档操作流程却出现了问题。这一现象给我带来了诸多困扰，并且难以找到合适的解决方案。在此分享一种可行的解决办法
1⃣️--------------- js ----------------
layui.use('table', function() {
var table = layui.table;
$.ajax({
type: "get",
url: releaseBasePath + '/selectReleaseData?typeId=' + $("#typeId").val(), // 数据接口
async: true,
success: function(r) {
var obj = JSON.parse(r);
var data = obj.data;
table.render({
elem: '#moreRelease',
data: data,
height: 515,
cols : [ [ // 表头
{
field : 'title',
title : '标题',
sort : true,
align : 'left',
width : '41%',
event : 'seeDetail',
style: 'cursor: pointer;'
},{
field : 'releaseUserName',
title : '发布人',
width : '15%',
align : "center",
sort : true
}, {
field : 'releaseDeptName',
title : '发布部门',
width : '20%',
align : "center",
sort : true
}, {
field : 'releaseTime',
title : '发布时间',
width : '25%',
align : "center",
sort : true
} ] ],
skin: 'row', //表格风格
even: true, //隔行背景
page: true, //是否显示分页
limits: [5, 10, 15], //显示
limit: 10 //每页默认显示的数量
});
}
});
// 监听单元格事件
table.on('tool(detail)', function(obj) {
var data = obj.data;
if (obj.event === 'seeDetail') {
window.open(releaseBasePath + "/seeRelease?id=" + data.id);
}
});
})
⚠️注：在开发过程中发现了问题，在设计布局时请避免同时使用align和fixed。这会导致出现一条很奇怪的竖线。
2⃣️--------------- controller ----------------
@RequestMapping(value = "/selectReleaseData", method = RequestMethod.GET)
@ResponseBody
public String selectReleaseData(String typeId) {
List releaseList = releaseInfoService.selectReleaseByTypeId(typeId);
JSONObject jsonObject = new JSONObject();
jsonObject.put("code", 0);
jsonObject.put("msg", "");
jsonObject.put("count", releaseList.size());
jsonObject.put("data", releaseList);
return jsonObject.toString();
}
这个返回可以根据Layui Api的格式，查询出所有的数据，返回即可。
==================================================
介意上面的这种方式进行优化，通过PageInfo封装，后台真分页。
在JavaScript中对table.render进行配置时，在其属性中可以设置特定参数来实现功能。
request: {
pageName: 'pageStart', //页码的参数名称，默认：page
limitName: 'pageSize' //每页数据量的参数名，默认：limit
},
后台系统需要接收这两个分页控制参数，并被定义为在ReleaseInfoEntity实体中。
@RequestMapping(value = "/selectReleaseData", method = RequestMethod.GET)
@ResponseBody
public String selectReleaseData(RequestViewPoint request, ReleaseInfoEntity releaseInfoEntity) throws UnsupportedEncodingException {
String title = releaseInfoEntity.getTitle();
//如果是IE浏览器，则用URLEncode解析
if(isMSBrowser(request)){
title = URLDecoder.decode(title, "UTF-8");
}
int page = releaseInfoEntity.getPageStart();
int limit = releaseInfoEntity.getPageSize();
PageHelper.startPage(page, limit);
新实例化一个InfoPage对象并调用selectReleaseByEntity方法获取对应的释放信息。
JSONObject jsonObject = new JSONObject();
jsonObject.put("code", 0);
jsonObject.put("msg", "");
jsonObject.put("count", pageInfo.getTotal());
jsonObject.put("data", pageInfo.getList());
return jsonObject.toString();
}
就这样，即可实现后台的真分页，效率也会好很多。
☀️☀️☀️