Bootstrap Paginator分頁外掛超詳細使用示例
--------jsp頁面只需要兩個div，一個用於拼接table，一個放分頁相關頁碼
<div id="select" height:520px;">
<table class="table table-striped table-bordered table-hover " id="userTable"> <!-- table table-bordered 帶邊框的樣式 -->
</table>
</div>
<div style="text-align:center;">
<ul id="useroption"></ul>
</div>
------------js中程式碼：
queryUser();
function queryUser() {
$.ajax({
async: true,
type: "post",
url: "UI_selectUser.action",//向後臺傳送請求，後臺為stuts2框架
dataType: "json",
data: {page:'1'},
cache: false,
success: function(data) {
var result = JSON.parse(data.json_data); //data.json_data為後臺返回的JSON字串，這裡需要將其轉換為JSON物件
tbody="<tr style='background:#fff;'><th >使用者名稱</th><th>姓名</th>" +
"<th >角色</th><th>職務</th><th>聯絡方式</th></tr>";
for (var i = 0; i <result.list.length; i++) {//拼接對應<th>需要的值
var trs = "";
trs+='<tr ><td >' + result.list[i].USERCODE
+ '</td><td >' + result.list[i].REALNAME
+ '</td><td >' + result.list[i].ROLEID
+ '</td><td>' + result.list[i].ROLENAME
+ '</td><td>' + ""
+'</td></tr>';
tbody+=trs;
};
$("#userTable").html(tbody);
var currentPage = result.CurrentPage; //當前頁數
var pageCount = result.pageCount; //總頁數
var options = {
bootstrapMajorVersion: 3, //版本
currentPage: currentPage, //當前頁數
totalPages: pageCount, //總頁數
numberOfPages: 5,
shouldShowPage:true,//是否顯示該按鈕
itemTexts: function (type, page, current) {
switch (type) {
case "first":
return "首頁";
case "prev":
return "上一頁";
case "next":
return "下一頁";
case "last":
return "末頁";
case "page":
return page;
}
},//點選事件，用於通過Ajax來重新整理整個list列表
onPageClicked: function (event, originalEvent, type, page) {
$.ajax({
async: true,
url: "UI_selectUser.action",
type: "post",
dataType : "json",
data: {page:page},
cache: false,
success: function (data) {
var result = JSON.parse(data.msg);
tbody="<tr style='background:#fff;'><th >使用者名稱</th><th>姓名</th>" +
"<th >角色</th><th>職務</th><th>聯絡方式</th></tr>";
for (var i = 0; i <result.list.length; i++) {
var trs = "";
trs+='<tr ><td >'+ result.list[i].USERCODE
+ '</td><td >' + result.list[i].REALNAME
+ '</td><td >' + result.list[i].ROLEID
+ '</td><td>' + result.list[i].ROLENAME
+ '</td><td>' + ""
+'</td></tr>';
tbody+=trs;
};
$("#userTable").html(tbody);
}/*success*/
});
}
};
$('#useroption').bootstrapPaginator(options);
}/*success*/
});
}
---------後臺Action程式碼
private int page;
public int getPage() {
return page;
}
public void setPage(int page) {
this.page = page;
}
public String selectUser() throws IOException{
int pageIndex = page;//當前頁
int pageSize =5;//設定每頁要展示的資料數量(根據專案需求靈活設定)
int rowCount = 0 ;
List<Map> listExamine=userService.queryUserInfo();//獲取總資料量
try {
rowCount=listExamine.size();//總條數
//通過計算，得到分頁應該需要分幾頁，其中不滿一頁的資料按一頁計算
if(rowCount%pageSize!=0)
{
rowCount = rowCount / pageSize + 1;
}
else
{
rowCount = rowCount / pageSize;
}
} catch (Exception e) {
}
List<Map> showList=userService.queryShowUserInfo(pageIndex,pageSize);//根據pageIndex和pageSize獲取需要展示的該頁資料
//轉成Json格式
String json_data = "{\"pageCount\":"+rowCount+",\"CurrentPage\":"+pageIndex+",\"list\":" + JSONArray.fromObject(showList) + "}";
boolean success=true;
//之下的兩行程式碼為本人專案中封裝的返回json資料的方法，各位只需要用自己的方法將json_data字串返回前臺即可
ConvertToJson(success, json_data);
return "jsonData";
}
-------效果圖如下：
