作者:
故事我忘了￠
個人微信公眾號: 程序猿的月光寶盒
個人微信公眾號: 程序猿的月光寶盒
//當前頁
private int pageNum;
//每頁的數量
private int pageSize;
//當前頁的數量
private int size;
//總頁數
private int pages;
//第一頁
private int firstPage;
//上一頁
private int prePage;
//下一頁
private int nextPage;
//總記錄數
private long total;
//由於startRow和endRow不常用，這里說個具體的用法
//可以在頁面中"顯示startRow到endRow 共size條數據"
//當前頁面第一個元素在數據庫中的行號
private int startRow;
//當前頁面最后一個元素在數據庫中的行號
private int endRow;
//結果集
private List<T> list;
//是否為第一頁
private boolean isFirstPage = false;
//是否為最后一頁
private boolean isLastPage = false;
//是否有前一頁
private boolean hasPreviousPage = false;
//是否有下一頁
private boolean hasNextPage = false;
//導航頁碼數
private int navigatePages;
//所有導航頁號
private int[] navigatepageNums;
//導航條上的第一頁
private int navigateFirstPage;
//導航條上的最后一頁
private int navigateLastPage;
項目中使用了Mybatis的PageHelper分頁插件后的js文件
/**
* 初始化首頁數據
*/
function initData(pageNo) {
//清空原來的數據,找到第一個以外的tr,並移除,用 :gt()
$("tr:gt(0)").remove();
$.ajax({
url: "showInvi.do",
type: "post",
dataType: "json",
data: {"pageNo": pageNo},
async: true,
success: function (obj) {
console.log(obj);
if (obj.size === 0) {//如果沒有數據
var str = `
<tr>
<td colspan="5">沒有符合條件的數據</td>
</tr>
`;
$("#dataTble").append(str);
$("p").html("");
} else {
$.each(obj.list, function (i) {
var str = `
<tr>
<td>${obj.list[i].title}</td>
<td>${obj.list[i].summary}</td>
<td>${obj.list[i].author}</td>
<td>${obj.list[i].createdate}</td>
<td>
<a href="/showReply.html?invid=${obj.list[i].id}">查看回復</a>||<a href="javascript:void(0);" onclick="del(${obj.list[i].id},'${obj.list[i].title}');">刪除</a>
</td>
</tr>
`;
$("#dataTble").append(str);
});
$("tr:gt(0):odd").attr("style", "background-color:#90EE90");
//分頁,我是放在一個p標簽里
var pageFoot = $("p");
//在分頁前,清空原來分頁的內容
pageFoot.html("");
var pageStr = "";
if (obj.total === 0) {//如果沒有數據,就不顯示分頁條
return;
}
if (obj.isFirstPage && obj.hasNextPage) {//如果是第一頁,並且還有下一頁
pageStr = `
<a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;">首 頁</a>|
<a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;"><< 上一頁</a>|
<a href="javascript:void(0);" onclick="initData(${obj.nextPage});">下一頁>></a>|
<a href="javascript:void(0);" onclick="initData(${obj.pages});">尾 頁</a>
`
} else if (obj.isFirstPage && !obj.hasNextPage) {//如果是第一頁,並且沒有下一頁
pageStr = ``//nothing to do
} else if (!obj.isFirstPage && obj.hasNextPage) {//如果不是第一頁,並且還有下一頁
pageStr = `
<a href="javascript:void(0);" onclick="initData(1)">首 頁</a>|
<a href="javascript:void(0);" onclick="initData(${obj.prePage});"><< 上一頁</a>|
<a href="javascript:void(0);" onclick="initData(${obj.nextPage});">下一頁>></a>|
<a href="javascript:void(0);" onclick="initData(${obj.pages});">尾 頁</a>
`
} else if (!obj.isFirstPage && !obj.hasNextPage) {//如果不是第一頁,且沒有下一頁
pageStr = `
<a href="javascript:void(0);" onclick="initData(${obj.firstPage});">首 頁</a>|
<a href="javascript:void(0);" onclick="initData(${obj.prePage});"><< 上一頁</a>|
<a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;">下一頁>></a>|
<a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;">尾 頁</a>
`
}
pageStr += `
第
${obj.pageNum}
頁/共
${obj.pages}
頁(${obj.total}條)
`;
pageFoot.append(pageStr);
}
}, error: function () {
alert("initData error");
}
})
}
基本上分頁部分可以作為模板
他對應的html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<center>
<h1>帖子列表</h1>
<hr/>
<form id="findInvis">
帖子標題:
<input title="請輸入帖子標題" name="title">
<!--input的類型還是submit-->
<input type="submit" value="搜索" >
</form>
<div id="infos">
<br/>
<table border="1" style="width: 100%;text-align: center" id="dataTble">
<tr style="background-color: #6FABC1;">
<td>標題</td>
<td>內容摘要</td>
<td>作者</td>
<td>發布時間</td>
<td>操作</td>
</tr>
</table>
<p></p>
</div>
</center>
<script rel="script" type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script rel="script" type="text/javascript" src="js/list.js"></script>
</body>
</html>
對應的ServiceImpl
@Override
public PageInfo<Map<String, Object>> selectByPrimaryKey(Integer invid,Integer pageNo) {
PageHelper.startPage(pageNo,4);
List<Map<String, Object>> maps = replyDetailMapper.selectByPrimaryKey(invid);
return new PageInfo<> (maps);
}
對應的Controller,是標注@RestController的
@RequestMapping("/showInvi.do")
public PageInfo<Map<String, Object>> selectByTitle(Invitation invitation,Integer pageNo) {
return invitationService.selectByTitle(invitation,pageNo);
}
頁面分頁模板部分
success : function(obj) {
console.log(obj);
var strData ="";
//在循環的前面清空標題以下的所有行
//獲取行>1的那行.調用移除方法
$("tr:gt(1)").remove();
$.each(obj.list,function (i) {
strData +=`
<tr>
<th>${obj.list[i].id}</th>
<th>${obj.list[i].name}</th>
<th>${obj.list[i].age}</th>
<th>${obj.list[i].gender}</th>
<th>${obj.list[i].telephone}</th>
<th>${obj.list[i].email}</th>
<th>${obj.list[i].cname}</th>
<th>
<a href="updates.html?id=${obj.list[i].id}">更新</a>
<a href="javascript:void(0);" onclick="del(${obj.list[i].id})">刪除</a>
</th>
</tr>
`;
});
//找到table,並拼接
$("table").append(strData);
//分頁
//在分頁前,清空原來分頁的內容
$("p").html("");
var pageStr = "";
if (obj.total === 0) {//如果沒有數據,就不顯示分頁條
return;
}
if (obj.isFirstPage && obj.hasNextPage) {//如果是第一頁,並且還有下一頁
pageStr = `
<a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;">首 頁</a>|
<a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;"><< 上一頁</a>|
<a href="javascript:void(0);" onclick="initData(${obj.nextPage});">下一頁>></a>|
<a href="javascript:void(0);" onclick="initData(${obj.pages});">尾 頁</a>
`
} else if (obj.isFirstPage && !obj.hasNextPage) {//如果是第一頁,並且沒有下一頁
pageStr = ``//nothing to do
} else if (!obj.isFirstPage && obj.hasNextPage) {//如果不是第一頁,並且還有下一頁
pageStr = `
<a href="javascript:void(0);" onclick="initData(1)">首 頁</a>|
<a href="javascript:void(0);" onclick="initData(${obj.prePage});"><< 上一頁</a>|
<a href="javascript:void(0);" onclick="initData(${obj.nextPage});">下一頁>></a>|
<a href="javascript:void(0);" onclick="initData(${obj.pages});">尾 頁</a>
`
} else if (!obj.isFirstPage && !obj.hasNextPage) {//如果不是第一頁,且沒有下一頁
pageStr = `
<a href="javascript:void(0);" onclick="initData(${obj.firstPage});">首 頁</a>|
<a href="javascript:void(0);" onclick="initData(${obj.prePage});"><< 上一頁</a>|
<a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;">下一頁>></a>|
<a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;">尾 頁</a>
`
}
pageStr += `
第
${obj.pageNum}
頁/共
${obj.pages}
頁(${obj.total}條)
`;
$("p").append(pageStr);
},