jsp頁面假分頁
頁面的假分頁：就是一次性的將數據庫中的數據獲取后返回頁面，然后通過js將頁面進行控制，這每次點擊分頁控件的時候，不需要進入后台服務器進行獲取數據。
優缺點：從數據庫中取出所有的數據，然后分頁在界面上顯示。訪問一次數據庫，但由於選擇的數據量比較大，所以第一次花費時間比較長，但之后每一頁的顯示都是直接、快速的，避免對數據庫的多次訪問。
綜上:如果數據量較小，使用假分頁的效果會更優，如果數據量龐大，使用真分頁的效果更優。注意分頁控件的js的引入位置一定能夠是咋分頁的Div的下面。不能在頁面的頭部引入。
下面是代碼：
首先是js
創建pagging.js 代碼如下：
//獲取對應控件 pagging.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 = 10;//每頁信息條數 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();
接着是頁面：
后台返回的數據是包括
ModelAndView view = new ModelAndView("patient_list_new2");
view.addObject("pageCount", pageCount);//總頁數
view.addObject("curPage", page);//當前頁 默認1
view.addObject("patients", patients);//列表
view.addObject("patientSize", patients.size());//總數
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Gmeda-受試者管理</title> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <style> body { padding-right:0!important; } </style> </head> <body> <div id="content"> <div class="container"> <div class="row"> <div class="col-md-9 right-content"> <div class="table-responsive"> <table class="table table-hover hy-table" id="theTable"> <thead> <tr class="hy-th"> <th>受試者編號</th> <th>受試者</th> <th>研究者</th> <th>隨機化日期</th> <th>狀態</th> </tr> </thead> <c:forEach var="p" items="${patients }" varStatus="vs"> <tr> <td>${p.patientNum }</td> <td>${p.patientName }</td> <td>${p.creatorName }</td> <td>${p.randomDate }</td> <td>${p.groupName}</td> </tr> </c:forEach> </table> </div><!-- /table-responsive --> <div class="gridItem" style="padding: 5px; width: 250px; float: left; text-align: left; height: 20px; font-size: 15px;" > 共<span id="spanTotalInfor">${patientSize}</span> 條記錄 當前第<span id="spanPageNum">${curPage}</span>頁 共<span id="spanTotalPage">${pageCount}</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> </div><!-- container --> </div><!-- content --> <script type="text/javascript"> var theTable = document.getElementById("theTable"); 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> </html>
一定要注意: pagging.js的位置js/Pagging.js
注意：將pagging.js的文件引入項目時候必須在分頁div 下面引入，否則會報錯。