jsp页面的分页---假分页
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 下面引入，否则会报错。
