Bootstrap Paginator分页插件使用
Bootstrap Paginator分页插件使用
- 概述
Bootstrap Paginator是一款基于Bootstrap的js分页插件。它提供了一系列的参数用来支持用户的定制，提供了公共的方法可随时获得插件状态的改变，以及事件来监听用户的动作。
目前经过测试的浏览器包括： Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+。
官网地址：http://bootstrappaginator.org/
参数列表：https://my.oschina.net/shunshun/blog/204587
2.demo实现
首先编写一个分页实体Page,用于接收前台传来的分页：
public class Page {
private int currentPage=1; //当前页数
private int totalPages; //总页数
private int totals; //记录总行数
private int pageSize=5; //每页记录行数
private int prefPage; //上一页
private int nextPage; //下一页
public int getCurrentPage() {
return currentPage;
}
public void setCurrentPage(int currentPage) {
this.currentPage = currentPage;
}
public int getTotalPages() {
return totalPages = totals % pageSize == 0 ? totals / pageSize : totals / pageSize + 1;
}
public void setTotalPages(int totalPages) {
this.totalPages = totalPages;
}
public int getTotals() {
return totals;
}
public void setTotals(int totals) {
this.totals = totals;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public int getNextPage() {
if (currentPage < totalPages) {
nextPage = currentPage + 1;
} else {
nextPage = currentPage;
}
return nextPage;
}
public void setNextPage(int nextPage) {
this.nextPage = nextPage;
}
public int getPrefPage() {
if (currentPage > 1) {
prefPage = currentPage - 1;
} else {
prefPage = currentPage;
}
return prefPage;
}
public void setPrefPage(int prefPage) {
this.prefPage = prefPage;
}
}其次，引入Bootstrap Paginator插件所依赖的js
<link type="text/css" rel="stylesheet" href="bootstrap.css">
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script type="text/javascript" src="bootstrap-paginator.js"></script>
在前端嵌入分页代码，注意：bootstrap3版本及以上需要把 id="pageLimit"的分页放入ul标签里
<div id="Paginator" style="text-align: center">
<ul id="pageLimit"></ul>
</div>js代码的实现：
<script>
$('#pageLimit').bootstrapPaginator({
currentPage:'${page.currentPage}'|| 1 ,
totalPages: ${page.totalPages},
size:"normal",
bootstrapMajorVersion: 3,
alignment:"right",
numberOfPages:${page.pageSize},
pageUrl:function (type,page,current) {
//是每个分页码变成一个超链接
return '?page=' +page;
},
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) {
location.href = "?page="+page;
}*/
});
</script>最后实习后端代码：
@Autowired
private Page p;
@RequestMapping(value = "/Display")
public ModelAndView Display(int page,Model model){
ModelAndView mav = new ModelAndView();
p.setTotals(blogService.getBlogTotal());
p.setCurrentPage(page);
//TODO 实现所需的功能
//分页查询
List<Blog> listBlog = blogService.getBlogByPage((page-1)*p.getPageSize(),p.getPageSize());
model.addAttribute("listBlog",listBlog);
model.addAttribute("page",p);
mav.setViewName("/blog");
return mav;
}访问连接：
http://localhost:8080/blogDisplay.do?page=1实现效果：动态查询
完成分页的效果~
