LayUI实现数据分页功能
我们先来看下官网的演示画面。
具体代码:
页面引入layui.css、 layui.js
<div style="width: 1200px;">
<table lay-filter="test">
</table>
<div id="laypage"></div>
</div>
前台js
var 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: '<%=path%>/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<PExl> 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
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tangbcefe
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01