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
分页插件使用方法的详解,希望对大家有所帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:laypage.js分页插件使用方法详解 - Python技术站