layui(5)——内置模块分页模块

模块加载名称:laypage

laypage 的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染:





    
    
    
    Document
    
    
    
    




    

基础参数选项

通过核心方法:laypage.render(options) 来设置基础参数。由于使用非常简单,本篇直接罗列核心接口的参数选项

参数选项 说明 类型 默认值
elem 指向存放分页的容器,值可以是容器ID、DOM对象。如:
1. elem: 'id' 注意:这里不能加 # 号
2. elem: document.getElementById('id')
String/Object -
count 数据总数。一般通过服务端得到 Number -
limit

每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。

Number 10
limits 每页条数的选择项。如果 layout 参数开启了 limit,则会出现每页条数的select选择框 Array [10, 20, 30, 40, 50]
curr

起始页。一般用于刷新类型的跳页以及HASH跳页。如:

    //开启location.hash的记录
    
laypage.render({
      elem: 'test1',
      count: 500,
      curr: location.hash.replace('#!fenye=', '') //获取起始页
      ,hash: 'fenye' //自定义hash值
    });          
                  

Number 1
groups 连续出现的页码个数 Number 5
prev 自定义“上一页”的内容,支持传入普通文本和HTML String 上一页
next 自定义“下一页”的内容,同上 String 下一页
first 自定义“首页”的内容,同上 String 1
last 自定义“尾页”的内容,同上 String 总页数值
layout 自定义排版。可选值有:count(总条目输区域)、prev(上一页区域)、page(分页区域)、next(下一页区域)、limit(条目选项区域)、refresh(页面刷新区域。注意:layui 2.3.0 新增) 、skip(快捷跳页区域) Array ['prev', 'page', 'next']
theme 自定义主题。支持传入:颜色值,或任意普通字符。如:
1. theme: '#c00'
2. theme: 'xxx' //将会生成 class="layui-laypage-xxx" 的CSS类,以便自定义主题
String -
hash 开启location.hash,并自定义 hash 值。如果开启,在触发分页时,会自动对url追加:#!hash值={curr} 利用这个,可以在页面载入时就定位到指定页 String/Boolean false

1. limit 参数

    layui.use('laypage', function(){
      var laypage = layui.laypage;
      
      //执行一个laypage实例
      laypage.render({
        elem: 'test1', //注意,这里的 test1 是 ID,不用加 # 号
        count: 150,//数据总数,从服务端得到
        limit: 15 //可以得出分页数为150/15=10
      });
    });

你可能感兴趣的:(layui学习,layui,前端,javascript)