layUI分页功能讲解及后台+前端实现
发布时间
阅读量：
阅读量
文章目录
-
-
- 一：原理讲解
- 二：表格HTML代码
- 三：js代码
- 四：后台代码
-
一：原理讲解
在LAYUI中，自带一个分页page控件，当我们将page设为true时就会有下面的分页控件，但是分不了页，因为没有后台控制数据和一个 laypage.render去控制分页的逻辑实现
而当我们增加laypage.render的代码后（代码见下文）点击分页的页码时，layUI会内置一个ajax去向后台请求后面的数据，大家可以按住F12进入network控制台，当点击页码时就会出现下图的提交
对比表格的ajax的URL
会发现多了两个参数一个page一个limit，这是layUI自动添加的，大家不要以为是我自己写的ajax想后台请求的啊，所以这样的话我们需要在后台接收这两个参数，并将它作为划分数据的依据，也就是说前端请求后台要数据，而后台给一部分数据到前台，并不是一次性查询所有数据送到前端，根据这思路这就很好实现了
二：表格HTML代码
<div>
<table id="demo" lay-filter="test"></table>
</div>
三：js代码
layui.use('table', function () {
var table = layui.table;
var laypage = layui.laypage;
//第一个实例
table.render({
elem: '#demo'
, height: 450
,type:'post'
, url: "AssociationAnalysisServlet?method=formData"//数据接口
, page: true //开启分页
, cols: [[ //表头
{templet: '#xuhao', title: 'ID', width: 80, sort: true, fixed: 'left'}
, {templet: '#formMedincine', title: '关联规则', width: 620}
]]
,done: function(data, curr, count){
//如果是异步请求数据方式，res即为你接口返回的信息。
//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
laypage.render({
elem:'laypage'
,count:count
,curr:curnum
,limit:limitcount
,layout: ['prev', 'page', 'next', 'skip','count','limit']
,jump:function (obj,first) {
if(!first){
curnum = obj.curr;
limitcount= obj.limit;
productGroupId=count;
getFormLimitData(productGroupId,curnum,limitcount);
}
}
})
}
});
});
function getFormLimitData代码：
function getFormLimitData(productGroupId,curnum,count) {
layui.use('table',function () {
var table = layui.table;
var laypage = layui.laypage;
//第一个实例
table.render({
elem: '#demo'
, height: 450
,type:'post'
, url: "AssociationAnalysisServlet?method=formData"//数据接口
, page: true //开启分页
, cols: [[ //表头
{templet: '#xuhao', title: 'ID', width: 80, sort: true, fixed: 'left'}
, {templet: '#formMedincine', title: '关联规则', width: 620}
]]
,done: function(data, curr, count){
//如果是异步请求数据方式，res即为你接口返回的信息。
//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
laypage.render({
elem:'laypage'
,count:count
,curr:curnum
,limit:limitcount
,layout: ['prev', 'page', 'next', 'skip','count','limit']
,jump:function (obj,first) {
if(!first){
curnum = obj.curr;
limitcount= obj.limit;
productGroupId=count;
getFormLimitData(productGroupId,curnum,limitcount);
}
}
})
}
});
});
}
四：后台代码
由于代码不是从数据库得到的，所以这者给出跟分页相关的部分代码
public void formData(HttpServletRequest req, HttpServletResponse resp) throws Exception {
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=utf-8");
// 一个list存放多条数据包装类
List<AssociationFormData> medicineTableData = new ArrayList<>();
int currentPage = Integer.parseInt(req.getParameter("page") == null ? "1" : req.getParameter("page"));
int limit = Integer.parseInt(req.getParameter("limit") == null ? "10" : req.getParameter("limit"));
System.out.println("page"+currentPage+"limit:"+currentPage);
//截取分页数据，从（page-1）*limit的位置到page*limit的位置，共limit个数据
if((count-(currentPage-1)*limit)/limit==0){
limitData=new ArrayList<>(medicineTableData.subList((currentPage-1)*limit,count));
}else {
limitData=new ArrayList<>(medicineTableData.subList((currentPage-1)*limit,currentPage*limit));
}
JSONObject obj = new JSONObject();
obj.put("code", 0);
obj.put("msg", "");
obj.put("count", count);
obj.put("data", limitData);
PrintWriter out = resp.getWriter();
String correlationCoefficientListJson = obj.toJSONString();
out.print(correlationCoefficientListJson);
}
全部评论 (0)
还没有任何评论哟~