今天總結一個JSP假分頁的實例，由基本功能由js實現。
相較前一篇真分頁中程序的功能，豐富了一些。具備首頁尾頁，和頁面跳轉功能。
首先還是來總結一下真假分頁的優缺點和特性吧。
假分頁：從數據庫中取出所有的數據，然后分頁在界面上顯示。訪問一次數據庫，但由於選擇的數據量比較大，所以第一次花費時間比較長，但之后每一頁的顯示都是直接、快速的，避免對數據庫的多次訪問。
真分頁：確定要顯示的數量和內容，然后每次都去數據庫取出該少量數據，優點是數據量小，缺點是訪問數據庫頻繁。
綜上:如果數據量較小，使用假分頁的效果會更優，如果數據量龐大，使用真分頁的效果更優。
下面來列舉一個假分頁的實例。
先簡述假分頁的實現思路:
假分頁是一次性讀出表中所有的數據信息:
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();