laypage.js分页插件使用方法详解

1. 简介

laypage.js 是一款基于 jQuery 开发的分页插件，可以方便地在网页中实现分页功能。它具有轻量、易用、兼容性强等优点，被广泛应用于各种类型的网页中。以下是使用 laypage.js 的完整攻略。

2. 下载和引入

首先，在 laypage.js 官网上下载最新版本的 laypage.js 文件。

然后，在 HTML 页面中引入以下代码：

<link rel="stylesheet" href="path/to/layui/css/layui.css">
<script src="path/to/jquery/jquery.min.js"></script>
<script src="path/to/layui/layui.js"></script>
<script src="path/to/laypage.js"></script>

其中，path/to/layui 和 path/to/jquery 分别是 layui 和 jQuery 的文件路径，需要根据自己的实际情况来修改。

3. 使用方法

3.1 基本用法

在 HTML 页面中添加一个元素作为分页的容器，并设置它的 ID：

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

然后，在 JavaScript 中调用 laypage 函数来初始化分页：

layui.use(['laypage'], function(){
  var laypage = layui.laypage;
  laypage.render({
    elem: 'demo',
    count: 50,
    limit: 10,
    jump: function(obj){
      console.log(obj.curr); //当前页码
      console.log(obj.limit); //每页显示条数
    }
  });
});

这里的参数说明如下：

• elem：表示分页容器的选择器，需要添加 # 或 . 前缀。
• count：表示总共有多少条数据。
• limit：表示每页显示多少条数据。
• jump：表示分页切换时的回调函数。

3.2 高级用法

在一些复杂的场景中，我们可能需要更多的配置选项，下面是一些常用的高级配置选项：

（1）前缀和后缀：

layui.use(['laypage'], function(){
  var laypage = layui.laypage;
  laypage.render({
    elem: 'demo',
    count: 50,
    limit: 5,
    groups: 3,
    prev: '<',
    next: '>',
    first: '首页',
    last: '尾页',
    layout: ['prev', 'page', 'next', 'skip', 'count', 'limit', 'refresh', 'first', 'last'],
    jump: function(obj, first){ //首次不执行
       if(!first){
         //do something
       }
    }
  });
});

（2）自定义分页样式：

.laypage a{display:inline-block;height:24px;line-height:24px;padding:0 10px;border:1px solid #dcdcdc;border-radius:2px;float:left;margin-right:10px;margin-bottom:10px;color:#666}
.laypage .layui-laypage-prev{border-radius:0 2px 2px 0;border-right:none}
.laypage .layui-laypage-next{border-radius:2px 0 0 2px;border-left:none}
.laypage .layui-laypage-curr,.laypage .layui-laypage-prev,.laypage .layui-laypage-next{background-color:#1E9FFF;color:#fff;border-color:#1E9FFF}

这里的参数说明如下：

• groups：表示连续几页之间显示省略号。
• prev：表示上一页按钮的文本内容。
• next：表示下一页按钮的文本内容。
• first：表示首页按钮的文本内容。
• last：表示尾页按钮的文本内容。
• layout：可自定义分页布局，支持以下内容：prev（上一页按钮）page（当前页码）next（下一页按钮）skip（跳转输入框）count（总页数）limit（每页条数选择）refresh（刷新按钮）first（首页按钮）last（尾页按钮）。
• jump：分页切换时的回调函数。

4. 示例说明

以下是使用 laypage.js 实现分页功能的两个示例。

4.1 示例一

HTML 代码：

<div id="demo1"></div>

JavaScript 代码：

layui.use(['laypage'], function(){
  var laypage = layui.laypage;
  laypage.render({
    elem: 'demo1',
    count: 1000,
    limit: 30,
    groups: 5,
    curr: location.hash.replace('#!page=', ''), //获取hash值为当前页码
    hash: 'page',
    jump: function(obj, first){
      if(!first){
         location.hash = '!page='+ obj.curr; //hash值变化，分页也会变化
      }
    }
  });
});

这个示例演示了如何利用 URL 的 hash 值来实现分页切换，优点是可以通过 URL 分享链接来直接跳转到指定页码。

4.2 示例二

HTML 代码：

<div id="demo2"></div>

JavaScript 代码：

layui.use(['laypage'], function(){
  var laypage = layui.laypage;
  laypage.render({
    elem: 'demo2',
    count: 100,
    limit: 20,
    theme: '#5fb878',
    layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],
    jump: function(obj){
      $('#list').html('第'+ obj.curr +'页，每页显示'+ obj.limit +'条数据');
    }
  });
});

这个示例演示了如何使用自定义分页样式，并且每次分页切换时通过 AJAX 获取数据并在页面上显示。

以上是 laypage.js 分页插件使用方法的详解，希望对大家有所帮助。

阅读剩余 69%