layui中laypage组件的使用方法-创新互联

laypage 的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染。核心方法： laypage.render(options)  来设置基础参数。

员工经过长期磨合与沉淀，具备了协作精神，得以通过团队的力量开发出优质的产品。成都创新互联公司坚持“专注、创新、易用”的产品理念，因为“专注所以专业、创新互联网站所以易用所以简单”。公司专注于为企业提供网站建设、网站设计、微信公众号开发、电商网站开发，微信小程序开发，软件按需求定制网站等一站式互联网企业服务。

一、laypage的常用基础参数

layui.use(['laypage'], function () {
            laypage = layui.laypage
            laypage.render({
                elem: 'pageTest'                 //这是元素的id，不能写成"#pageTest"
                , count: data.length             //数据总数
                , limit: 10                      //每页显示条数
                , limits: [10, 20, 30]
                , curr: 1                        //起始页
                , groups: 5                      //连续页码个数
                , prev: '上一页'                 //上一页文本
                , netx: '下一页'                 //下一页文本
                , first: 1                      //首页文本
                , last: 100                     //尾页文本
                , layout: ['prev', 'page', 'next','limit','refresh','skip']
               
                //跳转页码时调用
                , jump: function (obj, first) { //obj为当前页的属性和方法，第一次加载first为true
                             //         do something
                    if (!first) {
                             //非首次加载 do something  
                    }
                }
            })
        });

二、使用方式

在layui中的table中包含了laypage，这里就不再说明laytable中的分页用法，主要写一个后台分页，前端加载列表（非table中的列表）的栗子，具体为点击分类栏，主体部分显示对应的新闻列表。

                    　　

                        　　　　
新闻分类1
                        　　　　
新闻分类2
                        　　　　
新闻分类3
                        　　　　
新闻分类4
                    　　
                
新闻分类1
 

                    　　

                    　　

                

以上就是layui laypage组件常见用法总结的详细内容，更多请关注创新互联网站制作公司其它相关文章！

分享文章：layui中laypage组件的使用方法-创新互联
网页地址：http://cxhlcq.com/article/ipohs.html