layui的laypage分页插件使用

window.onload= function () {loadData()  //请求数据getPage()     //分页操作}var page=1; //设置首页页码var limit=2;  //设置一页显示的条数var total;    //总条数function loadData(){$.ajax({type:"post",url:"/it/orderManage/getOrderList",//对应controller的URLasync:false,dataType: 'json',data:{"pageIndex":page,"pageSize":limit,},success:function(ret){total=ret.total;  //设置总条数console.log(ret);var data1=ret.rows;var html='';for(var i=0;i<data1.length;i++){html+='<dl>';html+=' <dt>';html+='     <span class="s1">'+data1[i].CREATE_TIME+'</span>';html+='     <span class="s2">'+data1[i].STAGE_NAME+'</span>';html+=' </dt>';html+=' <dd class="d1">';html+='     价格：<span>￥'+data1[i].REWARD_FEE+'</span>';html+=' </dd>';html+=' <dd class="d1">';html+='     名称：<span>'+data1[i].ORDER_NAME+'</span>';html+=' </dd>';html+=' <dd class="d1">';html+='     人数：<span>'+data1[i].TAKE_NUM+'人参与</span>';html+=' </dd>';html+=' <dd class="d1">';html+='     时间：<span>'+data1[i].START_DATE+'点 -- '+data1[i].END_DATE+'点</span>';html+=' </dd>';html+='</dl>';}console.log(html)$(".orderList").empty().append(html);}});}function getPage(){layui.use('laypage', function(){var laypage = layui.laypage;//执行一个laypage实例laypage.render({elem: 'laypage' //注意，这里的 test1 是 ID，不用加 # 号,count: total, //数据总数，从服务端得到limit:limit,   //每页条数设置jump: function(obj, first){//obj包含了当前分页的所有参数，比如：console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。console.log(obj.limit); //得到每页显示的条数page=obj.curr;  //改变当前页码limit=obj.limit;//首次不执行if(!first){loadData()  //加载数据}}});});}

以上是前台js，后台配合对应的分页插件就可以实现分页效果了。我用的是mybatis的pageHelper

layui的laypage分页插件使用相关推荐

java实现layui分页_基于LayUI分页和LayUI laypage分页的使用示例
本文介绍了LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页,分享给大家,具体如下: 效果图: 一.引用js依赖主要是jquery-1.11. ...
Layui框架的分页（laypage）和模板引擎（laytpl）的使用
需求:根据数据信息生成数据分页展示. (注:商品的评论列表,分页使用laypage,评论内容区块显示用laytpl) 思路:首先显示时,先请求数据,获取需要显示数据的总条数.在请求数据成功后,首先进行 ...
二十九、layui分页插件的使用
<div id="page1"></div> <script>//开启分页var page = 1;function findstoreList ...
laypage分页java例子_laypage分页插件的使用
laypage是用于分页的插件,该插件通过js请求分页数据 1.载入js文件 2.在页面中显示分页信息的地方插入标记 3.添加js var url = '{:url("article/lis ...
layui 加载第三方插件
layui 加载第三方插件 1. 使用模块 2. 内置模块 3. 扩展一个 layui 模块 4. 加载第三方插件为layui模块 1. 使用模块 Layui的模块加载采用核心的 layui.use( ...
PageHelper 分页插件只用Page、不用PageInfo 的写法
PageHelper 分页插件,学到的写法是得到Page 对象后再转成PageInfo 对象,但Page 是ArrayList 的子类,里面包含了数据列表和分页信息,为什么不能直接用Page 对象做分 ...
SpringBoot + laypage分页 + 模糊查询
之前写过一篇关于JSP调用laypage分页的博客,写的比较详细,但是也比较繁杂,正好由于新项目分页的需要,故用SpringBoot将其重写,顺便集成了模糊查询. 1.效果图 2.domain(实体类 ...
bootstrap layui 两种分页的实现
最近做的项目中后台界面用的layui框架,前台界面用的是boostrap框架,这就导致我在做分页的过程中要考虑前台两种分页的动态实现,现在我已经爬出这个坑了,哈哈,给大家分享一下,写的不好的地方请大家 ...
ajax结合接口分页插件
利用ajax调用接口数据做分页功能 1. 分页方法,写在公共js里面以供调用,代码如下: 因为采用了layui中的样式,所以需要引入layui.css,可以去layui官网下载:http://www. ...

layui的laypage分页插件使用

layui的laypage分页插件使用相关推荐

最新文章

热门文章