lautin-pagination是一款基于bootstrap3样式设计的分页插件,它使用简便、灵活,满足用户在客户端程序开发中的多数需求 特别适用于百条级别的数据分页。如果数据容量达到1000+,则必须使用ajax按页从服务端抓取;
使用npm安装该包时,它所依赖的boostrap、jquery都会同步下载,默认的安装目录包括以下内容:
|--Pagination.js 核心类库
|--public 开放资源 用于测试使用
|----bootstrap
|----jquery
|--test 测试案例地址
|----data.js 测试数据文件
|----index.html 演示文稿 用于查看效果,需要以http地址运行以支持模块化
|--package.json 包说明文件
npm install lautin-pagination
最新版,兼容环境(推荐)npm install lautin-pagination@2.0
安装2.0,以模块方式加载npm install lautin-pagination@1.x
安装1.0,以<script>
引入
兼容es6模块与es5 Web两种环境,用户可以自由选择:
<script src="./node_modules/lautin-pagination/Pagination-web.js"></script>
import Pagination from Pagination.js
v2.0版本经过重构,采用es6+模块化
,支持以import
方式导入类库。功能上主要是在callback函数中增加了render方法,将页码栏的渲染交由核心方法来实现,这样避免动态渲染时分页器无法正常绑定事件,该修改主要针对MVVM模型中响应式DOM中无法实现事件绑定的完善。
<link rel="stylesheet" href="../public/bootstrap/dist/css/bootstrap.min.css">
<div id="cont">
<!-- 数据显示区域 -->
</div>
<div id="pgbr">
<!-- 页码栏位置 -->
</div>
<script src="../public/jquery/dist/jquery.js"></script>
<script type="module">
//加载核心类文件
import Pagination from '../Pagination.js';
$.ajax({
type : "get",
url : "./data.json",
success (result) {
show(result);
}
});
function show(resource) {
//对数据进行分页显示
Pagination({
total: resource,
length : 5,
theme : "${header} ${first} ${prev} ${pages} ${next} ${last}",
callback: function (data, render) {
var table = `<table class='table table-striped .table-hover'>
<thead>
<tr>
<th>#</th><th>name</th><th>description</th>
</tr>
</thead><tbody>`;
//遍历截取出来的数据 然后组装到table的tr中
data.forEach(function (item, index, arr) {
table += `<tr>
<td>${item.gid}</td>
<td>${item.gname.padEnd(20, "...")}</td>
<td>${item.gdesc.padEnd(30, "...")}</td>
</tr>`;
});
table += `</tbody></table>`;
//将表格数据放入页面指定区域
cont.innerHTML = table;
//页面中渲染页码栏
render("#pgbr");
},
});
}
</script>
V1.0版本主要适配浏览器环境,使用IIFE封装环境,并在全局导出Pagination
- 在页面中 引入Pagination类文件:
<script src="./node_modules/lautin-pagination/libs/Pagination.js"></script>
- 加载boostrap3样式文件,注意版本:
<link rel="stylesheet" href="./node_modules//bootstrap/dist/css/bootstrap.min.css">
- 设置存放数据和页码栏的容器:
<div class="container">
<!--存放分页数据的容器-->
</div>
<div class="pgbr">
<!--显示页码栏的位置-->
</div>
- 在业务流中 调用Pagination()方法:
$.ajax({
type :
url :
data :
dataType :
success (result) {
//result为请求到的接口数据 需要进行分页
//接下来调用Pagination方法进行数据分页
Pagination({
total : result, //分页总数据
length : 10, //每页显示长度
callback (data, pager) {
//data为分页后的数据,对象集合数据的形式
//pager为组装好的页码栏,一个完整的字符串
//数据需要根据用户需求渲染之后放入container中
//页码栏直接放入pgbr中即可
//todo here
}
})
},
});
-
total :要分页的总数据,百条左右即可,不宜过大,必须是对象集合数组形式,形如:
[{gid : 1, gname : '鼠标'}, {gid : 2, gname : '电视机'}, {gid :3, gname : '连衣裙'}]
-
callback : 接收分页数据和页码栏的回调函数,该方法需要接收两个参数:data和pager
Pagination({ total : [], callback (data, pager) { } })
-
length :每页显示的数据长度,默认为10
-
theme:分页栏主题样式,它的默认值为:
'${header} ${first} ${prev} ${pages} ${next} ${last}'
,表示显示全部分页信息。可以指定部分,例如 只显示 [上一页,页码栏,下一页] 这三个部分,则设置该选项的值为:${prev} ${pages} ${next}
-
size : 页码栏弹性伸缩,默认为常规大小,可以配置
pagination-lg
(放大)和pagination-sm
(缩小)