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

实现效果：动态查询

完成分页的效果~