layui.laypage怎么用

什么是layui.laypage

layui.laypage 是一款基于 layui 实现的分页模块，它能够在不刷新页面的情况下实现数据的分页展示，非常方便。

如何引入layui.laypage

引入 CSS 文件

在 head 区域引入如下 CSS 文件：

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

引入 JS 文件

在 body 底部引入如下 JS 文件：

<script src="layui/layui.js"></script>

如何使用 layui.laypage

在具体使用 layui.laypage 之前，需要先构建出页面所需的 HTML 元素，示例代码如下：

<!--HTML代码-->
<div id="demo" class="layui-form"></div>

在构建好 HTML 元素后，需要编写 layui.laypage 的初始化代码。示例代码如下：

<!--JS代码-->
layui.use('laypage', function(){
  var laypage = layui.laypage;
  
  //执行一个laypage实例
  laypage.render({
    elem: 'demo' //注意，这里的 test1 是 ID，不用加 # 号
    ,count: 50 //数据总数，从服务端得到
  });
});

上述代码使用了 layui.use 方法来异步加载 layui.laypage 模块，基于此模块可以构建具体的分页实例。

layui.laypage 的参数配置

layui.laypage 中有很多参数可以进行配置，我们可以根据实际需求进行相应修改。

elem

类型：String

默认值：无

说明：ID选择器，也可以是 DOM 片段，用于将分页组件渲染到这个容器中。

count

类型：Number

默认值：0

说明：数据总数，一般由后端生产，用于计算分页的总页数。

limit

类型：Number

默认值：10

说明：每页显示的数据条数。

limits

类型：Array

默认值：[10, 20, 30, 40, 50]

说明：每页显示数据条数的选择项。

curr

类型：Number

默认值：1

说明：起始页。一般情况下，初始化 page 实例时会自动设定一个 curr。

groups

类型：Number

默认值：5

说明：连续出现的页码个数。

layout

类型：String | Array

默认值：'prev,page,next,skip,limits,total'

说明：自定义分页布局，可以传入一个字符串拼接或数组。

hash

类型：String | Boolean

默认值：false

说明：开启 hash，可以在分页的时候检测锚点，并自动获取对应页码。

prev

类型：String

默认值：'prev'

说明：上一页按钮显示文字。

next

类型：String

默认值：'next'

说明：下一页按钮显示文字。

first

类型：String

默认值：'1'

说明：第一页按钮显示文字。

last

类型：String

默认值：'last'

说明：最后一页按钮显示文字。

theme

类型：String

默认值：'#1E9FFF'

说明：分页主题颜色。

总结

通过本文的讲解，我们可以了解到 layui.laypage 的基本用法及参数配置，更加深入地了解了如何使用 layui 实现分页功能。在实际的开发中，我们可以根据项目的需求，采用不同的参数进行配置，满足业务的需求。