标签：
今天和大家分享一个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。
Bootstrap分页插件：bootstrap-paginator
标签：
原文地址：http://www.cnblogs.com/kagome2014/p/5694824.html
