新零售商城 快打包
热门标签
当前位置:首页 > JS代码 > 其它代码

强大的js分页组件laypage

所属栏目:其它代码 时间:2016-08-16 来源:网络 作者:不详 次围观 次下载
强大的js分页组件laypage
兼容:
查看演示
下载地址
收藏
http://demo.16css.com/qtdm/1213
http://www.16css.comhttp://d.16css.com/d/file/qtdm/201608/16css.com_3dc2590a278b576ba6496656e67f17b8.jpg

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


使用laypage

获得laypage包后,把整个文件存放到你的目录。直接script引入laypage.js即可,无需引入css。当然,你还可以通过seajs或者requirejs加载laypag。使用时请保留来源,感谢支持。


默认版对应代码

//以下将以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();

整页刷新式跳转

//好像很实用的样子,后端的同学再也不用写分页逻辑了。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: document.getElementById('page2'), //容器。值支持id名、原生dom对象,jquery对象,    
    pages: 100, //总页数    
    skin: 'yahei', //加载内置皮肤,也可以直接赋值16进制颜色值,如:#c00    
    groups: 7 //连续显示分页数});

开启跳页

laypage({
    cont: $('#page3'), //容器。值支持id名、原生dom对象,jquery对象,    
    pages: 100, //总页数    
    skip: true, //是否开启跳页    
    skin: '#AF0000',
    groups: 3 //连续显示分页数
    });

自定义文本

laypage({
    cont: 'page4', //容器。值支持id名、原生dom对象,jquery对象,    
    pages: 11, //总页数    
    skin: 'molv', //皮肤    
    first: 1, //将首页显示为数字1,。若不显示,设置false即可    
    last: 11, //将尾页显示为总页数。若不显示,设置false即可    
    prev: '<', //若不显示,设置false即可    
    next: '>' //若不显示,设置false即可
    });

隐藏首页和尾页

laypage({
    cont: 'page5', //容器。值支持id名、原生dom对象,jquery对象,    
    pages: 11, //总页数    
    first: false,
    last: false
    });

开启hash

看看URL的变化。通过hash,你可以记录当前页。当前正处于第1页

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+'页');
    }
});

只出现上一页/下一页

laypage({
    cont: 'page7', //容器。值支持id名、原生dom对象,jquery对象,    pages: 11, //总页数    groups: 0,
    first: false,
    last: false,
    jump: function(obj){
        $('#view7').html('目前正在第'+ obj.curr +'页,一共有:'+ obj.pages +'页');
    }
});




具体效果请看演示,一流资源网推荐下载。

请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

共有 条评论

给个评价吧

验证码:
下载最多的

2淘宝商品jQuery列表多条件查询特效代码

3百度404页面JS倒计时返回页面代码

4后台登录jquery网页全屏背景图片自动切换代码

5SimplePager-非常简洁优秀的 jQuery 分页插件-同页面可重复使用

6IE6旧版浏览器提示升级代码模板下载

8jQuery公司大事记、历程时间轴专用代码

9点击切换背景图片jQuery代码

10网站在线答疑可收缩展开JS代码

最新更新的

1JS判断DIV内数值大小输出不同内容

5Jquery点击按钮给class设置样式的JS代码

6jquery提示浏览器版本过低建议下载其他浏览器的代码

8JS判断当前页面是否在微信浏览器中打开