正心全栈编程-文档站

Appearance

分页组件 ​

分页组件 laypage 提供了前端的分页逻辑，使得我们可以很灵活处理不同量级的数据，从而提升渲染效率。

提示

laypage 组件只负责分页本身的逻辑，具体的数据请求及对应的视图渲染需要另外去完成。laypage 不仅能应用在一般的异步分页上，还可直接对一段已知数据进行分页展现，如 table 组件的分页就是采用的 laypage。

基本使用 ​

html

<body>

<div id="demo-laypage-normal"></div>

<script src="/static/layui.js"></script>
<script>
    layui.use(function() {
        var laypage = layui.laypage;

        laypage.render({
            elem: 'demo-laypage-normal', // 挂载对象
            count: 100 // 数据总数
        });
    });
</script>
</body>

渲染 ​

API描述
var laypage = layui.laypage获得 laypage 模块。
laypage.render(options)laypage 组件渲染，核心方法。
laypage.render(options);
  • 参数 options : 基础属性配置项。

属性 ​

属性名描述类型默认值
elem绑定分页容器。值可以是容器 id 或 DOM 对象。如：elem: 'id' 注意：这里不能加 # 号elem: document.getElementById('id')string DOM-
count数据总数。一般通过后端得到number-
limit每页显示的条数。number10
limits每页条数的选择项。 若 layout 参数开启了 limit ，则会出现每页条数的 select 选择框array[10,…,50]
curr初始化当前页码。number1
groups连续出现的页码数量number5
prev自定义“上一页”的内容，支持传入普通文本和 HTMLstring上一页
next自定义“下一页”的内容，用法同上。string下一页
first自定义“首页”的内容，用法同上。string1
last自定义“尾页”的内容，用法同上。string自动获得
layout自定义分页功能区域排版。可自由排列，可选值有：
count 数据总数区域
prev 上一页区域
page 分页区域
next 下一页区
limit 条目选项区域
refresh 页面刷新区
skip 快捷跳页区		arraylayout: ['prev','page','next']
theme自定义主题。支持传入：颜色值或任意普通字符。如：theme: '#c00' 直接设置当前页按钮背景色theme: 'xxx' 会生成 class="layui-laypage-xxx" 的 CSS 类，以便自定义主题string-
hash设置 hash 名称。设置该属性后，点击分页将会自动对当前 url 追加：#{hash}={curr}，从而在页面刷新时初始化当前页码。string-

回调函数 ​

分页跳转后的回调函数。函数返回两个参数：

  • 参数 obj : 当前分页相关的所有选项值
  • 参数 first : 是否首次渲染，一般用于初始加载的判断
html

<body>

<div id="demo-laypage-normal"></div>

<script src="/static/layui.js"></script>
<script>
    layui.use(function() {
        var laypage = layui.laypage;

        laypage.render({
            elem: 'demo-laypage-normal', // 挂载对象
            count: 100, // 数据总数
            layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
            jump: function(obj, first) {
                console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
                console.log(obj.limit); // 得到每页显示的条数

                // 首次不执行
                if (!first) {
                    // do something
                    console.log('不是第一次才会执行');
                }
            },
        });
    });
</script>
</body>