bootstrap-paginator.js是一款基于bootstrap框架的很好用的生成分页导航插件.
原生插件源码仓库地址
GitHub地址
优化后仓库地址
优化后GitHub
介绍使用方法的博客
使用Bootstrap Paginator分页插件进行分页
Bootstrap3的paginator分页插件示例
Bootstrap Paginator 分页插件参数介绍及使用
源码工程目录
使用API文档
样例
Tip: 本文假定您也知晓
bootstrap-paginator插件用法.
缺陷
将缺陷之前, 简单说下分页的流程.
按照前后台功能划分可以分为:
- 前台分页: 从后台批量获取需要分页展示的所有数据, 然后前台实现分页展示. 换页时只是从第一次批量获取的数据中取值, 并不再次发送请求.
- 后台分页: 前台请求页码和页大小, 后台从数据库部分获取数据, 仅仅查询当前页码对应的数据. 这种方式使用较多.
本文采用后台分页.
分页相关的主要参数
- 页码: page
- 页大小: pageSize
- 总页数: totalPages
- 总记录数: total
- 分页数据: data, 一般是list集合
- 当前页: currentPage, 用于页面展示时, 当前页按钮高亮显示.
- startRow: 其实行号, 用于去数据库分页查询.
好了, 那么分页流程请看下图:
注意: 上面所说的都是我们通常使用的分页流程.
那么, bootstrap-paginator的分页逻辑, 需要我们改变一下思路, (题外话: 当你熟悉了后, 你会发现人家更加合理, 下文再叙).
bootstrap-paginator的分页逻辑
图中红色字体标示出了bootstrap-paginator和普通分页逻辑的差异.
乍一看, 貌似后端代码逻辑变得复杂了.
但是, 仔细分页, 会发现, 这种方式更加合理. 虽然多了计算totalPages的步骤, 但其实这些计算逻辑, (1)完全用一个Page的javabean搞定, 不需要每次都在业务代码中手动实现; (2)若是使用mybatis的PageHelper插件, 更不需要您亲自算了, 直接获取即可.
但是, 这个插件带来的好处是, 只需要在前台传递一个page参数. jsp页面EL表达式只需要接收三个参数: currentPage,totalPages,data.
不足
说白了, 上述的优点其实并不是特别的大. 反而, 让我们要转换思维, 这个我觉得是比较难受的(强迫症患者).
主要是不能接收它不能再选项中设置pageSize参数.
源码优化
修改默认参数配置
修改setOptions()
优化后效果
上述的普通分页逻辑和bootstrap-paginator特有的分页逻辑均可使用,
-
普通分页逻辑: 分页参数设置时, 设置
currentPage,pageSize和total. 并用EL表达式接收回显. -
bootstrap-paginator的分页逻辑: 分页参数设置时, 设置
currentPage和totalPages. 并EL表达式接收回显.
应用
环境: jsp+SpringMvc+Mybatis+PageHelper分页插件.
js和css
请注意版本兼容问题.
<!--region bootstrap分页插件-->
<!--jquery1.9 ok-->
<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
<!--Bootstrap v3.3.0 Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher-->
<script type="text/javascript" src="/js/bootstrap.js"></script> <!--有冲突-->
<!--1.0-->
<script src="/js/plugins/bootstrap-paginator.js" type="text/javascript"></script>
<!--v3.3.0-->
<link rel="stylesheet" href="/css/bootstrap.min.css"/>
<!--<link rel="stylesheet" href="/css/bootstrapv3.min.css" />-->
<!--<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">-->
<!--endregion-->
jsp页面分页导航条
<!-- START: 分页条 -->
<div align="right">
<ul id="page-nav"></ul>
</div>
<script type="text/javascript">
var element = $('#page-nav');
var options = {
bootstrapMajorVersion: 3, //对应的bootstrap版本
currentPage: ${productQuery.pageNo }, //当前页数，这里是用的EL表达式，获取从后台传过来的值
numberOfPages: 5, //显示的页按钮数
<%--totalPages:${productQuery.totalPages }, //总页数，这里是用的EL表达式，获取从后台传过来的值--%>
total:${productQuery.total}, //总记录数
pageSize:${productQuery.pageSize}, //页大小
shouldShowPage: true,//是否显示该按钮
size: "mini",
alignment: "right",
// pageUrl: function (type, page, current) {
//每个page按钮初始化时都会执行这里的方法
// alert("跳页")
//跳页
// return "http://example"; //会显示在页按钮的 a 标签上; !有了这个定义, 点击页按钮会执行这各链接跳转, 所以慎用!
// },
itemTexts: function (type, page, current) {//设置显示的样式，默认是箭头
switch (type) {
case "first":
return "首页";
case "prev":
return "上一页";
case "next":
return "下一页";
case "last":
return "末页";
case "page":
return page;
}
},
//点击事件
onPageClicked: function (event, originalEvent, type, page) {
console.log('onPageClicked ok');
console.log('page: ' + page);
//更新页码
$('#ipt_pageNum').val(page);
$('#filterForm').submit();
}
};
element.bootstrapPaginator(options);
</script>
<!-- END: 分页条 -->
productQuery对象
...
protected Integer pageNo = 1; //必须
protected Integer pageSize = 6; //相机抉择
protected Integer totalPages; //相机抉择
protected Long total; //相机抉择
...
service
...
//开启分页 传入页号和页大小
PageHelper.startPage(q.getPageNo(),q.getPageSize());
//查询数据集
List<Product> products =
productMapper.selectByExample(q);
q.setProducts(products);
if (products instanceof Page) {
Page page = (Page) products;
//获取totalPages并回传 (相机抉择)
q.setTotalPages(page.getPages());
//获取total, 并回传 (相机抉择)
q.setTotal(page.getTotal());
}
...
