準備工作：

• bootstrap-paginator.js 外掛
• github開源專案百度自行下載
• 引入js檔案（JQuery1.8+bootstrap.min.js+bootstrap.css+bootstrap-paginator.js）

<!--路徑根據自己專案修改-->
<link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
<script type="application/javascript" src="/js/jquery-3.2.1.min.js">
 
</script>
<script type="application/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
<script type="application/javascript" src="/bootstrap/js/bootstrap-paginator.min.js"></script>

<!--jsp頁面只需一個 ul 給定 class 和 id-->
<ul class="pagination"  id="page"></ul>
 

JS 中列表頁面請求

• 各種非同步請求都適用（本例採用angular的 $http 請求）
• options 是外掛的各項設定
• bootstrapMajorVersion:3 版本宣告必須
• onPageClicked:點選頁數，page就是當前頁
• itemTexts屬性將<<等符號替換為上一頁等文字（不寫也可以）

$http.post('../userCtrl/getUsers').success(function (response) {
    var pageCount = response.total;
    $scope
 
.users = response.users;

    var options = {
        currentPage: 1,
        totalPages: (pageCount%10) == 0?(pageCount/10):(pageCount/10)+1,
        numberOfPages:10,
        bootstrapMajorVersion:3,
        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){
            $.post(
                "../userCtrl/getUsers",
                {"page":page},
                function (map) {
                    $scope.users = map.users;
                    $scope.$apply();
                },
                "json"
            );
        }
    }
    $('#page').bootstrapPaginator(options);

}).error(function (response) {
    alert("列表請求出錯");
});

後臺操作

• 分頁之後的資料
• 總記錄數或總頁數

/**
 * 請求列表資料
 * @return users
 */
@RequestMapping("getUsers")
public @ResponseBody Map<String,Object> selectUsers(Integer page){
    if(page==null)page=1;//頁面第一次載入，預設為首頁
    List<User> users = userService.selectUsers(page);
    Integer total = userService.getTotal();//總記錄數
    Map<String,Object> map = new HashMap<String,Object>();
    map.put("users",users);
    map.put("total",total);
    return map;
}