layui实现数据分页功能

您所在的位置:网站首页 layui表格前端分页 layui实现数据分页功能

layui实现数据分页功能

#layui实现数据分页功能| 来源: 网络整理| 查看: 265

layui实现数据分页功能 时间:2021-08-21 来源:互联网 编辑:宝哥软件园 浏览:次

本文实例为大家分享了获得实现数据分页功能,供大家参考,具体内容如下

官网获得表演示页面

示例截图:

页面引入layui.css、layui.js

div id=' PTable ' style=' width : 1200 px;'table class=' layui-table ' id=' layui _ table _ id ' lay-filter=' test '/tablediv id=' lay page '/div/div前台射流研究…

var limit count=10 var curnum=1;//列表查询方法函数产品搜索(ProductGroupID,start,limitsize) { layui.use(['table ',' laypage ',' laydate'],function(){ var table=layui。表格,laydate=layui.laydate,lay page=layui。放置页面;桌子。render({ elem : ' # layui _ table _ id ',URL : ' %=path %/xx/plistquery。html?PiD=' ProductGroupId ' t page=' start ' t number=' limit size/*,其中:{pagename:start,pagelimit:limitsize} //传参*/,cols :[[{ field : ' ProductID ',title: 'ID ',width: '170 ',sort: true},{field: 'productName ',title: '名称,宽度: '450'},{field: 'productState ',title: '状态,宽度: '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:函数(res,curr,count){ //如果是异步请求数据方式,res即为你接口返回的信息。 //如果是直接赋值的方式,res即为:{data: [],count: 99}数据为当前页数据、计数为数据总长度放置页面。render({ elem : ' lay page ',count:count,curr:curnum,limit:limitcount,layout: ['prev ',' page ',' next ',' skip ',' count ',' limit'],jump:function (obj,first) { if(!first){ curnum=obj。curr极限计数=obj.limit//console。log(' curnum ' curnum);//控制台。日志('限制计数'限制计数);//图层。msg(curnum '-'限制计数);productsearch(productGroupId,curnum,limit count);} } }) } }) //监听工具条table.on('tool(test)',function(obj){ //注:工具是工具条事件名,测试是桌子原始容器的属性lay-filter='对应的值var data=obj.data //获得当前行数据,layEvent=obj.event//获得外行事件对应的值if(layEvent==' detail '){ viewlableinfo(数据。attribd);层。msg(数据。ATTRID);} else if(layEvent==' del '){ layer。“msg(”删除');} else if(layEvent==' edit '){ layer。“msg(”编辑操作');} });//常规用法laydate。render({ elem : ' # create date ' });//常规用法laydate。render({ elem : ' #处理时间' });});} var PiD=' $ { PgBEAN . PgID } product search(PiD、curnum、limit count);业务逻辑层

@覆盖公共字符串查询列表(HttpServletRequest请求){字符串总数=' ';字符串PiD=请求。getParameter(' PiD ');int currentNumber=整数。par已发送(请求。getparameter(' currentNumber ');string CurrentPage=请求。GetParameter(' CurrentPage ')==null?1 ' :请求。GetParameter(' CurrentPage ');//分页处理,显示第一页的30条数据(默认值)页面助手。起始页(整数。parsent(当前页面),当前编号);ListPExl list=导出Dao。query list(PiD);if(列表。size)(0){ total=list。获取(0).getTotal();}页面页面=页面助手。本地页面。get();如果(页面!=null){ page。setcurrentpage(整数。解析器(当前页面));}页面助手。end page();JSON对象JSON对象=新的JSON对象();jsonObject.put('code ',0);jsonObject.put('msg ',' ');jsonObject.put('count ',total);jsonObject.put('data ',list);//系统。出去。println(' js : '-JSON对象。tostring());返回JSonobject。ToString();}sql

其中结构化查询语言在计算总数总记录数时可以这么写

计数(*)超过(除以1)作为总数以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

版权声明:layui实现数据分页功能是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。

上一篇:layui实现数据表格桌子分页功能(ajax异步) 下一篇:基于地对地导弹框架实现获得分页效果


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3