Bootstrap Paginator分页插件使用

1. 概述

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

实现效果：动态查询

完成分页的效果~