今天和大家分享一个Bootstrap的分页插件：bootstrap-paginator。
插件地址：
https://github.com/lyonlai/bootstrap-paginator
先看下目录结构
$bootstrap-paginator：代表插件解压后的根目录。
$bootstrap-paginator/build：插件压缩后的js文件，需要引入到项目中。
$bootstrap-paginator/css：插件用到的CSS文件存放目录。
$bootstrap-paginator/documentation：官网Demo的存放目录。
需要引入的文件：
<!-- 位于$bootstrap-paginator/css目录中 --><link href="../third-part/bootstrap-paginator/documentation.css" rel="stylesheet"><!-- 位于$bootstrap-paginator/build目录中 --><script src="../third-part/bootstrap-paginator/bootstrap-paginator.min.js"></script>
分享下我的Demo源码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link href="../third-part/bootstrap-3.3.5-dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../third-part/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../third-part/bootstrap-paginator/documentation.css" rel="stylesheet">
<script src="../third-part/jQuery/jquery-2.2.4.js"></script>
<script src="../third-part/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script src="../third-part/bootstrap-paginator/bootstrap-paginator.min.js"></script>
<script>
// 文档就绪函数开始
$(function(){
/* * 渲染分页组件 */ function perspPageBar(id){
$("#" + id).bootstrapPaginator({
bootstrapMajorVersion: 3 // 指定Bootstrap的版本，默认是Boostrap2，如果你用的是Boostrap3，则必须指定该值。
, currentPage: 1 // 当前页码
, totalPages: 10 // 总页数
, numberOfPages: 5 // 显示页的数量
, useBootstrapTooltip: true // 使用Bootstrap提示样式
, itemContainerClass: function (type, page, current) { // 应用鼠标的手型光标
return (page === current) ? "active" : "pointer-cursor";
}
, onPageChanged: function(event, oldPage, newPage){ // 页面改变时事件
// do something
}
});
}
perspPageBar("pageBar");
});
// 文档就绪函数结束
</script>
<style>
</style>
</head>
<body style="padding-top: 70px;">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>标签名</th>
</tr>
</thead>
</table>
</div>
<div class="col-md-6 col-md-offset-3 text-center">
<ul id="pageBar"></ul>
</div>
</div>
</div>
</body>
</html>
以上只是基本的参数应用，如果想了解更多的参数配置，可以参考下官网的Demo。
时间： 2024-08-26 07:16:11