PHP layUI如何分页,layui如何实现数据分页功能

该博客介绍了一种使用layui库进行分页查询和操作的方法。通过前端JS和后端业务逻辑层的配合,实现了动态加载表格数据、分页、排序以及工具栏操作。关键代码包括layui的table、laypage和laydate组件的使用,以及后端根据请求参数进行数据查询和分页处理。
摘要由CSDN通过智能技术生成

335881dd492ec14a4d3c70b62ccea353.png

我们先来看下官网的演示画面。

具体代码:

页面引入layui.css、 layui.js

前台jsvar limitcount = 10;

var curnum = 1;

//列表查询方法

function productsearch(productGroupId,start,limitsize) {

layui.use(['table','laypage','laydate'], function(){

var table = layui.table,

laydate=layui.laydate,

laypage = layui.laypage;

table.render({

elem: '#layui_table_id'

, url: '/xx/pListQuery.html?pId='+productGroupId+'¤tPage='+ start+'¤tNumber=' + limitsize

/*, where:{pagename:start,pagelimit:limitsize} //传参*/

, cols: [[

{field: 'productId', title: 'ID', width: '170', sort: true}

, {field: 'productName', title: '名称', width: '450'}

, {field: 'productState', title: '状态', width: '100'}

, {field: 'effectTime', title: '生效时间', width: '120', sort: true}

, {field: 'invalidTime', title: '失效时间', width: '120', sort: true}

, {field: 'productCost', title: '成本', width: '100', sort: true}

, {field: 'poperation', title: '操作', width: '100',fixed: 'right', toolbar: '#barDemo'}

]]

, page: false

, height: 430

,done: function(res, 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;

//console.log("curnum"+curnum);

//console.log("limitcount"+limitcount);

//layer.msg(curnum+"-"+limitcount);

productsearch(productGroupId,curnum,limitcount);

}

}

})

}

})

//监听工具条

table.on('tool(test)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"

var data = obj.data //获得当前行数据

,layEvent = obj.event; //获得 lay-event 对应的值

if(layEvent === 'detail'){

viewLableInfo(data.attrId);

layer.msg(data.attrId);

} else if(layEvent === 'del'){

layer.msg('删除');

} else if(layEvent === 'edit'){

layer.msg('编辑操作');

}

});

//常规用法

laydate.render({

elem: '#createDate'

});

//常规用法

laydate.render({

elem: '#processingTime'

});

});

}

var pId = '${pGBean.pgId }';

productsearch(pId, curnum, limitcount);

业务逻辑层@Override

public String queryList (HttpServletRequest request) {

String total = "";

String pId = request.getParameter("pId");

int currentNumber = Integer.parseInt(request.getParameter("currentNumber"));

String currentPage = request.getParameter("currentPage") == null ? "1" : request.getParameter("currentPage");

//分页处理,显示第一页的30条数据(默认值)

PageHelper.startPage(Integer.parseInt(currentPage), currentNumber);

List list = exportDao.queryList (pId);

if(list.size() > 0){

total = list.get(0).getTotal();

}

Page page = PageHelper.localPage.get();

if(page!=null){

page.setCurrentPage(Integer.parseInt(currentPage));

}

PageHelper.endPage();

JSONObject jsonObject = new JSONObject();

jsonObject.put("code", 0);

jsonObject.put("msg", "");

jsonObject.put("count", total);

jsonObject.put("data", list);

//System.out.println("json:----" + jsonObject.toString());

return jsonObject.toString();

}

sql

其中sql在计算总数totle时可以这么写COUNT(*) OVER(PARTITION BY 1) AS TOTAL

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值