多功能JavaScript分页组件 layPage

原创 2016年08月29日 16:50:34

官方网站:http://laypage.layui.com/

layPage是一款多功能的js分页组件,即适用于异步分页,又可用于传统的整页刷新跳页,还支持信息流加载,并且可无缝迁移至Node.js平台。layPage不依赖于任何第三方库,直接拿来用即可,它的接口继承了layui系列组件的一贯简洁,极易上手。


<div id="page1" ></div>

//以下将以jquery.ajax为例,演示一个异步分页  
$.getJSON('test/demo1.json', {curr: 6}, function(res){ //从第6页开始请求。返回的json格式可以任意定义  
    laypage({  
        cont: 'page1', //容器。值支持id名、原生dom对象,jquery对象。【如该容器为】:<div id="page1"></div>  
        pages: res.pages, //通过后台拿到的总页数  
        curr: 6, //初始化当前页  
        jump: function(e){ //触发分页后的回调  
            $.getJSON('test/demo1.json', {curr: e.curr}, function(res){  
                e.pages = e.last = res.pages; //重新获取总页数,一般不用写  
                //渲染  
                var view = document.getElementById('view1'); //你也可以直接使用jquery  
                var demoContent = (new Date().getTime()/Math.random()/1000)|0; //此处仅仅是为了演示  
                view.innerHTML = res.content + demoContent;   
            });  
        }  
    });  
}); 




 laypage({  
            cont: 'page1', //容器。值支持id名、原生dom对象,jquery对象。【如该容器为】:<div id="page1"></div>  
            pages: res.pageCount, //通过后台拿到的总页数  
            curr: 1, //初始化当前页  
            skin: '#429842',//皮肤颜色  
            groups: 3, //连续显示分页数  
            skip: true, //是否开启跳页  
            first: '首页', //若不显示,设置false即可  
            last: '尾页', //若不显示,设置false即可  
            //prev: '<', //若不显示,设置false即可  
            //next: '>', //若不显示,设置false即可  
            jump: function (e) { //触发分页后的回调  
                $.getJSON('/Mobile/AjaxHandler/QuestionAjax.aspx?action=GetRedisJoinMemberInformationById', {  
                    type: 2,  
                    ccId: ccId,  
                    pageIndex: e.curr,//当前页  
                    pageSize: pageSize,  
                    saveKey: saveKey  
                }, function (res) {  
                    e.pages = e.last = res.pageCount; //重新获取总页数,一般不用写  
                    //渲染  
                    var view = document.getElementById('userTable'); //你也可以直接使用jquery  
                    //解析数据  
                    var resultHtml = PackagData(res);  
                    view.innerHTML = resultHtml;  
                });  
            }  
        });  
    }); 

2.整页刷新式跳转

//好像很实用的样子,后端的同学再也不用写分页逻辑了。
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;
        }
    }
});


laypage({
    cont: 'page4', //容器。值支持id名、原生dom对象,jquery对象,
    pages: 11, //总页数
	skip: true, //是否开启跳页
    skin: '#AF0000',//皮肤
    groups: 3 //连续显示分页数
    first: 1, //将首页显示为数字1,。若不显示,设置false即可
    last: 11, //将尾页显示为总页数。若不显示,设置false即可
    prev: '<', //若不显示,设置false即可
    next: '>' //若不显示,设置false即可
});



使用laypage分页

在开发的时候经常遇到分页比较麻烦,尤其对于一个后端程序猿来说,但是这个问题不能不解决,于是找了一个分页的控件用用,记录在下,以便以后使用。 首先看下laypage网站的简介,然后你就发现很简单的使用...

layPage是一款多功能的js分页组件

layPage是一款多功能的js分页组件,即适用于异步分页,又可用于传统的整页刷新跳页,还支持信息流加载,并且可无缝迁移至Node.js平台。layPage不依赖于任何第三方库,直接拿来用即可,它的接...

layPage 多功能的js分页组件

layPage是一款多功能的js分页组件,即适用于异步分页,又可用于传统的整页刷新跳页,还支持信息流加载,并且可无缝迁移至Node.js平台。layPage不依赖于任何第三方库,直接拿来用即可,它的接...

layPage分页

  • 2017年01月12日 18:07
  • 5KB
  • 下载

SSM框架下用laypage和ajax实现分页和数据交互

SSM下用laypagei实现分页和ajax数据交互

使用Laypage进行分页

使用Laypage进行分页Laypage是一款简单,方便的分页插件,无需写过多的js代码只需要向后台传入当前页数(由于本人偷懒在JS中写死了pageSize) ...

layUI框架--laypage+SpringMVC实现后端分页

项目中用到了模板引擎thymeleaf和前端框架layUI,算是一路摸索、一个坑一个坑踩过来的。之前边学习边做项目的时候没有记录下学习的过程和遇到问题的解决思路和方法,着实有点可惜。所以从现在开始咯。...
  • DJJT10
  • DJJT10
  • 2017年04月26日 11:56
  • 4362

spring mvc中mybaits+laypage分页实现 bootstrap

后台部分 page类 public class Page { private int pageNum; private int pageSize; private ...
  • kane245
  • kane245
  • 2016年09月12日 12:05
  • 1268

thinkPHP5 使用laypage分页插件实现列表分页功能

thinkPHP5 使用laypage分页插件实现列表分页功能         一、背景        在使用thinkPHP框架做项目的时候,经常会遇到对列表的内容进行分页。thinkPHP...

基于layPage分页插件浅析两种分页方式

最近在开发过程中经常用到分页,今天挤出些时间来捋一捋自己的经验在web开发中,一般显示数据列表页时,我们会用到分页控件来显示数据。采用分页一般基于两种不同的需求,一种是数据量不算很大,但是在页面展示又...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:多功能JavaScript分页组件 layPage
举报原因:
原因补充:

(最多只允许输入30个字)