• 概述
  

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

实现效果：动态查询