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

實現效果：動態查詢

完成分頁的效果~