今天总结一个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;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; 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; 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;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();