目錄
二、bootstrap-paginator + PageHelper 前後臺分頁的實現
一、bootstrap-paginator 簡介
1.先導入相關的 bootstrap 、jquery、bootstrap-paginator 相關 css+js 文件，本文後面提供百度雲下載鏈接。
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="./js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="./js/bootstrap-paginator.js"></script>
2.在 body 標籤裏面寫下以下代碼：
<body>
<div style="text-align: right;">
<ul id='bp-3-element-test'></ul>
</div>
<script type="text/javascript">
$(function(){
var element = $('#bp-3-element-test');
var options = {
bootstrapMajorVersion:3, //bootstrap的版本要求
currentPage: 2, //設置當前頁
numberOfPages: 5, //設置可以點擊到的頁數範圍
totalPages:11 //設置總頁數
// numberOfPages:5 //一頁列出多少數據
}
element.bootstrapPaginator(options);
});
</script>
</body>
3.這樣就行了，項目使用，請自行修改一些動態參數。以下是效果圖：
4.下面是提供整個 bootstrap 的分頁插件代碼的百度雲鏈接，下載後可直接預覽，已經整理過，可讀性強。
鏈接: https://pan.baidu.com/s/114GSiHCX2xtrLRUk1yL6qw 密碼: a2k9
二、bootstrap-paginator 前後臺分頁的實現
1、導入相關的靜態資源
<link rel="stylesheet"
href="./static/bootstrap-paginator/bootstrap.min.css" />
<script src="./static/js/jquery.js"></script>
<script src="./static/bootstrap-paginator/bootstrap-paginator.js"></script>
2、存放分頁框的 html 代碼
<div>
<ul id='pageInfo'></ul>
</div>
3、JS 代碼
前臺後的交互，這裏採用的 ajax ，如果不清楚什麼是 ajax 的話，可以去學下。通過 ajax 拿到後臺的數據之後，需要自己渲染到 html 代碼中，具體怎麼渲染根據自己的需求去渲染。
<script type="text/javascript">
var element = $("#pageInfo);
pageStart();
function pageStart(){
$.ajax({
type:"GET",
url:"getlist",
dataType:"json",
data:{page:1},
success:function(data){
//後臺返回的需要顯示的信息列表
//根據自己需求再進行前端渲染
console.log(data.list);
var options = {
bootstrapMajorVersion:3, //bootstrap的版本要求
currentPage:data.page,//當前頁數
totalPages:data.totalPage,//總頁數
numberOfPages:data.pageSize,//每頁記錄數
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){//分頁按鈕點擊事件
$.ajax({//根據page去後臺加載數據
url:"getlist",
type:"GET",
dataType:"json",
data:{"page":page},
success:function(data){
//後臺返回的需要顯示的信息列表
//根據自己需求再進行前端渲染
console.log(data.list);
}
})
}
}
//初始化分頁框
element.bootstrapPaginator(options);
}
})
}
</script>
4、後臺代碼
後臺採用的是 PageHelper 分頁插件，不知道怎麼用的，可以看另外一篇博客的介紹。
@RequestMapping(value="/getlist")
public Map<String,Object> getListInfo(int page)throws IOException{
//PageHelper 後臺分頁插件
PageHelper.startPage(page, 10);
Map<String,Object> modelMap = new HashMap<String,Object>();
//從數據庫中查詢出數據
List<TUser> list = userService.displayAllUser();
PageInfo pageInfo = new PageInfo(list);
int totalPage = pageInfo.getPages();//總頁數
modelMap.put("page", page);
modelMap.put("list", list);
modelMap.put("totalPage", totalPage);
modelMap.put("pageSize",10 );
return modelMap;
}