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";
}
-------效果图如下: