JSP分頁---假分頁的實現
阿新 • • 發佈：2018-11-02
昨天寫了一個真分頁的資料庫查詢，今天本來想寫個假分頁，但在瀏覽時候發現了一個寫的比較詳細的假分頁知識，下面分享一下：首先貼上原文連結--https://www.cnblogs.com/yfsmooth/p/4774326.html
首先還是來總結一下真假分頁的優缺點和特性吧。
假分頁：從資料庫中取出所有的資料，然後分頁在介面上顯示。訪問一次資料庫，但由於選擇的資料量比較大，所以第一次花費時間比較長，但之後每一頁的顯示都是直接、快速的，避免對資料庫的多次訪問。
真分頁：確定要顯示的數量和內容，然後每次都去資料庫取出該少量資料，優點是資料量小，缺點是訪問資料庫頻繁。
綜上:如果資料量較小，使用假分頁的效果會更優，如果資料量龐大，使用真分頁的效果更優。
下面來列舉一個假分頁的例項。
先簡述假分頁的實現思路:
假分頁是一次性讀出表中所有的資料資訊:
1.讀出所有的資訊在JSP頁面繪成表格
2.利用JS寫相關的函式控制表格的相關行的display屬性顯示隱藏。
3.具體我們需要知道資料項總條數。每頁顯示多少條資料。
4.根據以上這兩個引數我們可以確定總頁數。另外需要我們再定義一個變數作為當前頁。
5.我們需要實現的功能是上一頁，下一頁，首頁，尾頁，頁面跳轉。
首頁和尾頁比較好實現:首頁只需要將當前頁置為一，再顯示第一頁資料即可，尾頁只需要把當前頁數置為尾頁，再顯示最後一頁應該顯示的資訊專案。
上一頁和下一頁需要將當前頁加1，顯示相關頁面的資料。
這些功能中，有一點需要格外注意，翻頁後控制元件的能否使用。例如首頁時首頁和上一頁不能使用，尾頁時或者當前頁最後一條資料為最後一條資料條目時，尾頁和下一頁不能使用。
原始碼中有比較詳細的註釋，此處就不再多做說明。
下面貼出相關原始碼:
servlet頁面程式碼:
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub StudentDao st = new StudentDao(); request.setAttribute("student",st.findAll()); request.getRequestDispatcher("student2.jsp").forward(request, response); }
Jsp頁面程式碼:
<body>
<table id="t_student" border="1" cellpadding="2" cellspacing="0" style="text-align:center;width:500px">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年齡</th>
<th>電話</th>
<th>成績</th>
</tr>
</thead>
<c:forEach items="${student}" var="st">
<tr>
<td>${st.getId()}</td>
<td>${st.getName()}</td>
<td>${st.getAge()}</td>
<td>${st.getPhone()}</td>
<td>${st.getScore()}</td>
</tr>
</c:forEach>
</table>
<div class="gridItem" style="padding: 5px; width: 250px; float: left; text-align: left; height: 20px; font-size: 15px;" >
共有 <span id="spanTotalInfor"></span> 條記錄
當前第<span id="spanPageNum"></span>頁
共<span id="spanTotalPage"></span>頁
</div>
<div class="gridItem" style="margin-left:50px; padding: 5px; width: 400px; float: left; text-align: center; height: 20px; vertical-align: middle; font-size: 15px;">
<span id="spanFirst" >首頁</span>
<span id="spanPre">上一頁</span>
<span id="spanInput" style="margin: 0px; padding: 0px 0px 4px 0px; height:100%; ">
第<input id="Text1" type="text" class="TextBox" onkeyup="changepage()" style="height:20px; text-align: center;width:50px" />頁
</span>
<span id="spanNext">下一頁</span>
<span id="spanLast">尾頁</span>
</div>
<script type="text/javascript">
var theTable = document.getElementById("t_student");
var txtValue = document.getElementById("Text1").value;
function changepage() {
var txtValue2 = document.getElementById("Text1").value;
if (txtValue != txtValue2) {
if (txtValue2 > pageCount()) {
}
else if (txtValue2 <= 0) {
}
else if (txtValue2 == 1) {
first();
}
else if (txtValue2 == pageCount()) {
last();
}
else {
hideTable();
page = txtValue2;
pageNum2.value = page;
currentRow = pageSize * page;
maxRow = currentRow - pageSize;
if (currentRow > numberRowsInTable) currentRow = numberRowsInTable;
for (var i = maxRow; i < currentRow; i++) {
theTable.rows[i].style.display = '';
}
if (maxRow == 0) { preText(); firstText(); }
showPage();
nextLink();
lastLink();
preLink();
firstLink();
}
txtValue = txtValue2;
}
}
</script>
<script type="text/javascript" src="js/Pagging.js"></script>
</body>相關JS程式碼:
//獲取對應控制元件
var totalPage = document.getElementById("spanTotalPage");//總頁數
var pageNum = document.getElementById("spanPageNum");//當前頁
var totalInfor = document.getElementById("spanTotalInfor");//記錄總數
var pageNum2 = document.getElementById("Text1");//當前頁文字框
var spanPre = document.getElementById("spanPre");//上一頁
var spanNext = document.getElementById("spanNext");//下一頁
var spanFirst = document.getElementById("spanFirst");//首頁
var spanLast = document.getElementById("spanLast");//尾頁
var pageSize = 5;//每頁資訊條數
var numberRowsInTable = theTable.rows.length-1;//表格最大行數
var page = 1;
//下一頁
function next() {
if (pageCount() <= 1) {
}
else {
hideTable();
currentRow = pageSize * page + 1; //下一頁的第一行
maxRow = currentRow + pageSize; //下一頁的一行
if (maxRow > numberRowsInTable) maxRow = numberRowsInTable+1;//如果計算中下一頁最後一行大於實際最後一行行號
for (var i = currentRow; i < maxRow; i++) {
theTable.rows[i].style.display = '';
}
page++;
pageNum2.value = page;
if (maxRow == numberRowsInTable) { //如果下一頁的最後一行是表格的最後一行
nextNoLink(); //下一頁 和尾頁 不點選
lastNoLink();
}
showPage();//更新page顯示
if (page == pageCount()) {//如果當前頁是尾頁
nextNoLink();
lastNoLink();
}
preLink();
firstLink();
}
}
//上一頁
function pre() {
if (pageCount() <= 1) {
}
else {
hideTable();
page--;
pageNum2.value = page;
currentRow = pageSize * page + 1;//下一頁的第一行
maxRow = currentRow - pageSize;//本頁的第一行
if (currentRow > numberRowsInTable) currentRow = numberRowsInTable;//如果計算中本頁的第一行小於實際首頁的第一行行號，則更正
for (var i = maxRow; i < currentRow; i++) {
theTable.rows[i].style.display = '';
}
if (maxRow == 0) { preNoLink(); firstNoLink(); }
showPage();//更新page顯示
if (page == 1) {
firstNoLink();
preNoLink();
}
nextLink();
lastLink();
}
}
//第一頁
function first() {
if (pageCount() <= 1) {
}
else {
hideTable();//隱藏所有行
page = 1;
pageNum2.value = page;
for (var i = 1; i < pageSize+1; i++) {//顯示第一頁的資訊
theTable.rows[i].style.display = '';
}
showPage();//設定當前頁
firstNoLink();
preNoLink();
nextLink();
lastLink();
}
}
//最後一頁
function last() {
if (pageCount() <= 1) {
}
else {
hideTable();//隱藏所有行
page = pageCount();//將當前頁設定為最大頁數
pageNum2.value = page;
currentRow = pageSize * (page - 1)+1;//獲取最後一頁的第一行行號
for (var i = currentRow; i < numberRowsInTable+1; i++) {//顯示錶格中最後一頁資訊
theTable.rows[i].style.display = '';
}
showPage();
lastNoLink();
nextNoLink();
preLink();
firstLink();
}
}
function hideTable() {//隱藏表格內容
for (var i = 0; i < numberRowsInTable+1; i++) {
theTable.rows[i].style.display = 'none';
}
theTable.rows[0].style.display = '';//標題欄顯示
}
function showPage() {//設定當前頁數
pageNum.innerHTML = page;
}
function inforCount() {//設定總記錄數
spanTotalInfor.innerHTML = numberRowsInTable;
}
//總共頁數
function pageCount() {
var count = 0;
if (numberRowsInTable % pageSize != 0) count = 1;
return parseInt(numberRowsInTable / pageSize) + count;
}
//顯示連結 link方法將相應的文字變成可點選翻頁的 nolink方法將對應的文字變成不可點選的
function preLink() { spanPre.innerHTML = "<a href='javascript:pre();'>上一頁</a>"; }
function preNoLink(){ spanPre.innerHTML = "上一頁"; }
function nextLink() { spanNext.innerHTML = "<a href='javascript:next();'>下一頁</a>"; }
function nextNoLink(){ spanNext.innerHTML = "下一頁";}
function firstLink() { spanFirst.innerHTML = "<a href='javascript:first();'>首頁</a>"; }
function firstNoLink(){ spanFirst.innerHTML = "首頁";}
function lastLink() { spanLast.innerHTML = "<a href='javascript:last();'>尾頁</a>"; }
function lastNoLink(){ spanLast.innerHTML = "尾頁";}
//初始化表格
function hide() {
for (var i = pageSize + 1; i < numberRowsInTable+1 ; i++) {
theTable.rows[i].style.display = 'none';
}
theTable.rows[0].style.display = '';
inforCount();
totalPage.innerHTML = pageCount();
showPage();
pageNum2.value = page;
if (pageCount() > 1) {
nextLink();
lastLink();
}
}
hide();