前端分頁框架bootstrap paginator用於web前端頁面快速實現美觀大方的翻頁功能。
在實現交互良好的頁面翻頁功能時，往往還需要配合使用后端分頁框架pagehelper。pagehelper框架於前端而言，主要作用是將分頁數據pageInfo從后端傳入到前端。
接下來給一個應用小栗子：
step1 我們需要在jsp頁面所需要顯示翻頁選項的位置插入一個<ul>標簽，並指定id，如下：
<ul id="pagination"></ul>
step2 下載並引用bootstrap-paginator.js文件,並在jsp頁面引入代碼如下：
<script src="${pageContext.request.contextPath}/js/bootstrap-paginator.js"></script>
step3 在<script>標簽中調用bootstrapPaginator初始化頁面，示例代碼如下：
<script>
$(function(){
// 使用bootstrap paginator初始化頁面
$('#pagination').bootstrapPaginator({
bootstrapMajorVersion:3,
//pageInfo.pageNum是當前頁面的頁碼
currentPage:${pageInfo.pageNum},
//pageInfo.pages是總頁數
totalPages:${pageInfo.pages},
//配置頁面跳轉函數，向后端傳入數據，發送跳轉請求,
//type：選擇的頁碼所顯示的文字，如第一頁默認type為first
//page:選擇的頁碼
//current：當前頁碼
pageUrl:function(type,page,current)
{
return '${pageContext.request.contextPath}/front/product/search?pageNum='+page;
},
itemTexts:function(type,page, current)
{//文字翻譯
switch (type) {
case "first":
return "首頁";
case "prev":
return "上一頁";
case "next":
return "下一頁";
case "last":
return "尾頁";
case "page":
return page;
}
}
});
});
</script>
這樣以后，配合使用相關css樣式，我們就可以看到翻頁效果了，如下：
