function generatePage() {
// 获取数据
var pageInfo = getPageInfoRemote();
// 填充分页
fillTableBody(pageInfo);
}
function getPageInfoRemote() {
var ajaxResult = $.ajax({
"url": "role/get/page/info.json",
"type": "post",
"data": {
"pageNum": window.pageNum,
"pageSize": window.pageSize,
"keyword": window.keyword
},
"async": false,
"dataType": "json"
});
console.log(ajaxResult);
var statusCode = ajaxResult.status;
if (!statusCode != 200) {
layer.msg("失败!响应状态码=" + statusCode + " 说明信息=" + ajaxResult.statusText);
return null;
}
var resultEntity = ajaxResult.responseJson;
var result = resultEntity.result;
if (result == "FAILED") {
layer.msg(resultEntity.message);
return null;
}
var pageInfo = resultEntity.data;
return pageInfo;
}
function fillTableBody(pageInfo) {
// 清除 tbody 中的旧的内容
$("#rolePageBody").empty();
// 这里清空是为了让没有搜索结果时不显示页码导航条
$("#Pagination").empty();
// 判断 pageInfo 对象是否有效
if (pageInfo == null || pageInfo == undefined || pageInfo.list == null || pageInfo.list.length == 0) {
$("#rolePageBody").append("<tr><td colspan='4' align='center'>抱歉!没有查询到您搜 索的数据!</td></tr>");
return;
}
// 使用 pageInfo 的 list 属性填充
for (var i = 0; i < pageInfo.list.length; i++) {
var role = pageInfo.list[i];
var roleId = role.id;
var roleName = role.name;
var numberTd = "<td>" + (i + 1) + "</td>";
var checkboxTd = "<td><input type='checkbox'></td>";
var roleNameTd = "<td>" + roleName + "</td>";
var checkBtn = "<button type='button' class='btn btn-success btn-xs'><i class=' glyphicon glyphicon-check'></i></button>";
var pencilBtn = "<button type='button' class='btn btn-primary btn-xs'><i class=' glyphicon glyphicon-pencil'></i></button>";
var removeBtn = "<button type='button' class='btn btn-danger btn-xs'><i class=' glyphicon glyphicon-remove'></i></button>";
var buttonTd = "<td>" + checkBtn + " " + pencilBtn + " " + removeBtn + "</td>";
var tr = "<tr>" + numberTd + checkboxTd + roleNameTd + buttonTd + "</tr>";
$("#rolePageBody").append(tr);
}
// 生成分页导航条
generateNavigator(pageInfo);
}
// 生成分页页码导航条
function generateNavigator(pageInfo) {
// 获取总记录数
var totalRecord = pageInfo.total;
// 声明相关属性
var properties = {
"num_edge_entries": 3,
"num_display_entries": 5,
"callback": paginationCallBack,
"items_per_page": pageInfo.pageSize,
"current_page": pageInfo.pageNum - 1,
"prev_text": "上一页",
"next_text": "下一页"
}
// 调用pagination()函数
$("#Pagination").pagination(totalRecord, properties);
}
// 翻页时的回调函数
function paginationCallBack(pageIndex, jQuery) {
// 修改 window 对象的 pageNum 属性
window.pageNum = pageIndex + 1;
// 调用分页函数
generatePage();
// 取消页码超链接的默认行为
return false;
}
用于快速抄:ajax实现分页
最新推荐文章于 2024-07-21 17:13:47 发布