插件描述：layPage是一款多功能的js分页组件，即适用于异步分页，又可用于传统的整页刷新跳页，还支持信息流加载，并且可无缝迁移至Node.js平台。layPage不依赖于任何第三方库，直接拿来用即可，它的接口继承了layui系列组件的一贯简洁，极易上手
layPage是一款多功能的js分页组件，即适用于异步分页，又可用于传统的整页刷新跳页，还支持信息流加载，并且可无缝迁移至Node.js平台。layPage不依赖于任何第三方库，直接拿来用即可，它的接口继承了layui系列组件的一贯简洁，极易上手。那么，从现在开始，将一切分页的任务交给layPage吧！
使用laypage
获得laypage包后，把整个文件存放到你的目录。直接script引入laypage.js即可，无需引入css。当然，你还可以通过seajs或者requirejs加载laypag。使用时请保留来源，感谢支持。
默认版对应代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | //以下将以jquery.ajax为例，演示一个异步分页function demo(curr){ $.getJSON('test/demo1.json', { page: curr || 1 //向服务端传的参数，此处只是演示 }, function(res){ //此处仅仅是为了演示变化的内容 var demoContent = (new Date().getTime()/Math.random()/1000)|0; document.getElementById('view1').innerHTML = res.content + demoContent; //显示分页 laypage({ cont: 'page1', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div> pages: res.pages, //通过后台拿到的总页数 curr: curr || 1, //当前页 jump: function(obj, first){ //触发分页后的回调 if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr demo(obj.curr); } } }); });};//运行demo(); |
整页刷新式跳转
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | //好像很实用的样子，后端的同学再也不用写分页逻辑了。laypage({ cont: 'page11', pages: 18, //可以叫服务端把总页数放在某一个隐藏域，再获取。假设我们获取到的是18 curr: function(){ //通过url获取当前页，也可以同上（pages）方式获取 var page = location.search.match(/page=(\d+)/); return page ? page[1] : 1; }(), jump: function(e, first){ //触发分页后的回调 if(!first){ //一定要加此判断，否则初始时会无限刷新 location.href = '?page='+e.curr; } }}); |
自定义皮肤
1 2 3 4 5 6 | laypage({ cont: document.getElementById('page2'), //容器。值支持id名、原生dom对象，jquery对象, pages: 100, //总页数 skin: 'yahei', //加载内置皮肤，也可以直接赋值16进制颜色值，如:#c00 groups: 7 //连续显示分页数}); |
开启跳页
1 2 3 4 5 6 7 | laypage({ cont: $('#page3'), //容器。值支持id名、原生dom对象，jquery对象, pages: 100, //总页数 skip: true, //是否开启跳页 skin: '#AF0000', groups: 3 //连续显示分页数}); |
自定义文本
1 2 3 4 5 6 7 8 9 | laypage({ cont: 'page4', //容器。值支持id名、原生dom对象，jquery对象, pages: 11, //总页数 skin: 'molv', //皮肤 first: 1, //将首页显示为数字1,。若不显示，设置false即可 last: 11, //将尾页显示为总页数。若不显示，设置false即可 prev: '<', //若不显示，设置false即可 next: '>' //若不显示，设置false即可}); |
隐藏首页和尾页
1 2 3 4 5 6 | laypage({ cont: 'page5', //容器。值支持id名、原生dom对象，jquery对象, pages: 11, //总页数 first: false, last: false}); |
开启hash
看看URL的变化。通过hash，你可以记录当前页。当前正处于第1页
1 2 3 4 5 6 7 8 9 | laypage({ cont: 'page6', //容器。值支持id名、原生dom对象，jquery对象, pages: 68, //总页数 curr: location.hash.replace('#!fenye=', ''), //获取hash值为fenye的当前页 hash: 'fenye', //自定义hash值 jump: function(obj){ $('#view6').html('看看URL的变化。通过hash，你可以记录当前页。当前正处于第'+obj.curr+'页'); }}); |
只出现上一页/下一页
1 2 3 4 5 6 7 8 9 10 | laypage({ cont: 'page7', //容器。值支持id名、原生dom对象，jquery对象, pages: 11, //总页数 groups: 0, first: false, last: false, jump: function(obj){ $('#view7').html('目前正在第'+ obj.curr +'页，一共有：'+ obj.pages +'页'); }}); |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 响应式人物角色介绍展示插件
- 下一个特效： xGallerify轻量级响应式jQuery图片画廊插件