layui的分页怎么用

1. 简介

分页是 Web 应用经常用到的一个功能，layui 也提供了相应的分页组件。本文将介绍 layui 分页的使用方法。

2. 准备工作

在使用 layui 分页组件之前，我们需要先引入 layui 的核心文件和分页组件的相关文件。

2.1 引入核心文件

<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

2.2 引入分页组件

<script src="layui/lay/modules/laypage.js"></script>

3. 使用方法

3.1 参数配置

定义分页的方式很简单，只需要在页面中放置一个带有指定样式类名的元素，然后通过 layui 的分页组件初始化函数 laypage() 进行初始化即可。

其中，laypage() 函数接受一个对象参数，用于配置分页的一些参数。

以下是一些常用的参数：

<table>
  <tr>
    <th>参数名</th>
    <th>类型</th>
    <th>说明</th>
  </tr>
  <tr>
    <td>elem</td>
    <td>String</td>
    <td>指定容器</td>
  </tr>
  <tr>
    <td>count</td>
    <td>Number</td>
    <td>数据总数</td>
  </tr>
  <tr>
    <td>limit</td>
    <td>Number</td>
    <td>每页显示的数据条数</td>
  </tr>
  <tr>
    <td>limits</td>
    <td>Array</td>
    <td>可选每页显示的数据条数</td>
  </tr>
  <tr>
    <td>curr</td>
    <td>Number</td>
    <td>当前页码（默认为 1）</td>
  </tr>
  <tr>
    <td>groups</td>
    <td>Number</td>
    <td>连续出现的页码个数（默认为 5）</td>
  </tr>
  <tr>
    <td>first</td>
    <td>String</td>
    <td>首页</td>
  </tr>
  <tr>
    <td>last</td>
    <td>String</td>
    <td>尾页</td>
  </tr>
  <tr>
    <td>prev</td>
    <td>String</td>
    <td>上一页（默认为“上一页”）</td>
  </tr>
  <tr>
    <td>next</td>
    <td>String</td>
    <td>下一页（默认为“下一页”）</td>
  </tr>
  <tr>
    <td>layout</td>
    <td>Array</td>
    <td>分页样式（默认为 [ 'prev', 'page', 'next', 'skip' ]）</td>
  </tr>
  <tr>
    <td>theme</td>
    <td>String</td>
    <td>风格（默认为：'#1E9FFF'）</td>
  </tr>
  <tr>
    <td>jump</td>
    <td>Function</td>
    <td>跳转函数</td>
  </tr>
</table>

我们可以通过定义一个对象来配置分页的参数，如下所示：

layui.use(['laypage'], function(){
    var laypage = layui.laypage;
    //总页数大于页码总数
    laypage.render({
        elem: 'demo',
        count: 100,
        limit: 10,
        curr: location.hash.replace('#!fenye=', ''),
        hash: 'fenye',
        jump: function(obj, first){
            if(!first){
                layer.msg('第 '+ obj.curr + ' 页');
            }
        }
    });
});

上面的例子中，我们设置了总共有 100 条数据，每页显示 10 条数据，当前页码从 hash 中读取，跳转时触发了一个弹出层。

3.2 在 HTML 中设置容器

在 HTML 中，我们需要设置一个容器，来展示分页。通常情况下，我们可以设置一个带有指定样式类名的 div 元素。

<div id="demo"></div>

3.3 初始化分页组件

在页面加载完成后，我们需要通过 layui 的分页组件初始化函数进行分页组件的初始化。

layui.use(['laypage'], function(){
    var laypage = layui.laypage;
    laypage.render({
        elem: 'demo',
        count: 100,
        limit: 10,
        curr: location.hash.replace('#!fenye=', ''),
        hash: 'fenye',
        jump: function(obj, first){
            if(!first){
                layer.msg('第 '+ obj.curr + ' 页');
            }
        }
    });
});

上面的例子中，我们引入了 layui 的分页模块，然后通过 laypage() 函数渲染分页组件。

同时，在 laypage() 函数中传入了一个对象参数，用于配置当前分页组件的一些参数，其中 elem 参数指定了容器的 ID（一般使用 div 元素作为容器，所以通常 elem 参数值为 div 的 ID 值）。

4. 小结

本文详细介绍了 layui 分页组件的使用方法，包括参数配置、容器设置和组件初始化等方面的内容。

使用 layui 的分页组件，可以方便地实现分页功能，使 Web 应用的交互更加友好，同时也能提高用户使用 Web 应用的体验。