參考博客：服務器端返回統一格式的數據
服務器端返回數據
假設服務器端返回數據格式如下：
{
"code": 1,
"msg": "操作成功！",
"data": {
"records": [
{
"id": 1,
"nickname": "張三",
"account": "zhangsan",
"password": "1234",
"email": "[email protected]"
},
{
"id": 2,
"nickname": "李四",
"account": "lisi",
"password": "1234",
"email": "[email protected]"
},
{
"id": 3,
"nickname": "王二",
"account": "wanger",
"password": "1234",
"email": "[email protected]"
}
],
"total": 8,
"size": 3,
"current": 1,
"orders": [],
"searchCount": true,
"pages": 3
}
}
注：data中的數據來自MyBatisPlus中的Ipage對象
分頁顯示模塊
function fun(url,pageNum,pageSize){
$.ajax({
url: url,
type: "POST",
data: {
pageNum: pageNum,
pageSize: pageSize
},
dataType: "json",
success: function (res) {
if(res.code == 1){ //成功
let $tbody = $("#tbody");
$tbody.empty();//清空元素
for(var i = 0;i<res.data.records.length;i++){
var $tr = $("<tr></tr>");
$tbody.append($tr);
let $index = $("<td>" + (i + 1) + "</td>");
let $checkbox = $("<td> <input type='checkbox'></td>");
let $account = $("<td>"+res.data.records[i].account+"</td>");
let $nickname = $("<td>"+res.data.records[i].nickname+"</td>");
let $email = $("<td>"+res.data.records[i].email+"</td>");
let $tdOp = $('<td>' +
'<button>審覈</button>'+
'<button>修改</button>'+
'<button>刪除</button>'+
'</td>');
$tr.append($index);
$tr.append($checkbox);
$tr.append($account);
$tr.append($nickname);
$tr.append($email);
$tr.append($tdOp);
}
//分頁
let $pagination = $("#pagination");
$pagination.empty();//清空元素
let $prePage1 = $('<li class="active"><a οnclick="fun(\''+url+'\',\''+(parseInt(pageNum)-1)+'\',\''+pageSize+'\')">上一頁</a></li>');
let $prePage0 = $('<li class="disabled"><a οnclick="fun(\''+url+'\',\''+(parseInt(pageNum)-1)+'\',\''+pageSize+'\')">上一頁</a></li>');
if (res.data.current > 1){
$pagination.append($prePage1);
}else {
$pagination.append($prePage0);
}
for (var i =1;i<=res.data.pages;i++){
let $page = $('<li><a οnclick="fun(\''+url+'\',\''+i+'\',\''+pageSize+'\')">'+i+'</a></li>');
if (i == res.data.current){
$page.css("color","blue");
}
$pagination.append($page);
}
let $nextPage1 = $('<li class="active"><a οnclick="fun(\''+url+'\',\''+(1+parseInt(pageNum))+'\',\''+pageSize+'\')">下一頁</a></li>');
let $nextPage0 = $('<li class="disabled"><a οnclick="fun(\''+url+'\',\''+(1+parseInt(pageNum))+'\',\''+pageSize+'\')">下一頁</a></li>');
if (res.data.current < res.data.pages){
$pagination.append($nextPage1);
}else {
$pagination.append($nextPage0);
}
//window.location.href=data.url;
}else if(res.code == -1){ //失敗
layer.msg(data, {time:1000, icon:5, shift:6}, function () {
});
}
}
});
}
測試頁面
<!DOCTYPE html>
<html lang="ZH-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<style type="text/css">
li, .disabled, .active {
display: inline;
margin-right: 10px;
list-style: none;
}
.disabled a {
color: yellow;
pointer-events: none;
}
.active a {
color: blue;
}
</style>
</head>
<body>
<table class="table table-bordered">
<thead>
<tr>
<th width="30">#</th>
<th width="30"><input type="checkbox"></th>
<th>賬號</th>
<th>名稱</th>
<th>郵箱地址</th>
<th width="150">操作</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>1</td>
<td><input type="checkbox"></td>
<td>hc</td>
<td>賀彩</td>
<td>[email protected]</td>
<td>
<button></button>
<button></button>
<button></button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6">
<ul id="pagination">
<li ><a href="#">上一頁</a></li>
<li ><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">下一頁</a></li>
</ul>
</td>
</tr>
</tfoot>
</table>
<script src="jquery/jquery-2.1.1.min.js"></script>
<script src="js/global.js"></script>
<script src="js/page.js"></script>
<script type="text/javascript">
fun(baseurl + "user/index", 1, 3);
</script>
</body>
</html>
結果：
- 首頁
![在這裏插入圖片描述]()
- 中間頁
![在這裏插入圖片描述]()
- 尾頁
![在這裏插入圖片描述]()
