原本做毕设做了一堆表格需要读出数据。为了以后的数据可能会很多做准备，这里实现一个以基于jsp页面实现的假分页。
假分页：实际上数据库一次过把所有数据读出来，通过对输出展示的控制来实现对数据分页的假象。
假分页方式合适于数据量比较小的数据展示，展示数据的速度比较快。但是当数据一次读取量比较大的时候，有可能会造成页面的崩溃。
网上找了好久的事例，摸索了好久才试验成功。
注意三点：
1、table标签里要标记可以标识此表格的id
2、引入pagging.js的访问路径不要出错
3、java script里对控制分页模块的标识那里对于table的识别id必须与1中填写的一致
核心代码：
首先，引入pagging.js
1 //获取对应控件 pagging.js 2 var totalPage = document.getElementById("spanTotalPage");//总页数 3 var pageNum = document.getElementById("spanPageNum");//当前页 4 var totalInfor = document.getElementById("spanTotalInfor");//记录总数 5 var pageNum2 = document.getElementById("Text1");//当前页文本框 6 7 var spanPre = document.getElementById("spanPre");//上一页 8 var spanNext = document.getElementById("spanNext");//下一页 9 var spanFirst = document.getElementById("spanFirst");//首页 10 var spanLast = document.getElementById("spanLast");//尾页 11 var pageSize = 10;//每页信息条数 12 13 var numberRowsInTable = theTable.rows.length-1;//表格最大行数 14 15 var page = 1; 16 17 //下一页 18 function next() { 19 if (pageCount() <= 1) { 20 } 21 else { 22 hideTable(); 23 currentRow = pageSize * page + 1; //下一页的第一行 24 maxRow = currentRow + pageSize; //下一页的一行 25 if (maxRow > numberRowsInTable) maxRow = numberRowsInTable+1;//如果计算中下一页最后一行大于实际最后一行行号 26 for (var i = currentRow; i < maxRow; i++) { 27 theTable.rows[i].style.display = ''; 28 } 29 page++; 30 pageNum2.value = page; 31 if (maxRow == numberRowsInTable) { //如果下一页的最后一行是表格的最后一行 32 nextNoLink(); //下一页 和尾页 不点击 33 lastNoLink(); 34 } 35 showPage();//更新page显示 36 if (page == pageCount()) {//如果当前页是尾页 37 nextNoLink(); 38 lastNoLink(); 39 } 40 41 preLink(); 42 firstLink(); 43 } 44 } 45 46 47 48 //上一页 49 function pre() { 50 if (pageCount() <= 1) { 51 } 52 else { 53 hideTable(); 54 page--; 55 pageNum2.value = page; 56 currentRow = pageSize * page + 1;//下一页的第一行 57 maxRow = currentRow - pageSize;//本页的第一行 58 if (currentRow > numberRowsInTable) currentRow = numberRowsInTable;//如果计算中本页的第一行小于实际首页的第一行行号，则更正 59 for (var i = maxRow; i < currentRow; i++) { 60 theTable.rows[i].style.display = ''; 61 } 62 if (maxRow == 0) { preNoLink(); firstNoLink(); } 63 showPage();//更新page显示 64 if (page == 1) { 65 firstNoLink(); 66 preNoLink(); 67 } 68 nextLink(); 69 lastLink(); 70 } 71 } 72 73 74 //第一页 75 function first() { 76 77 if (pageCount() <= 1) { 78 } 79 else { 80 hideTable();//隐藏所有行 81 page = 1; 82 pageNum2.value = page; 83 for (var i = 1; i < pageSize+1; i++) {//显示第一页的信息 84 theTable.rows[i].style.display = ''; 85 } 86 showPage();//设置当前页 87 88 firstNoLink(); 89 preNoLink(); 90 nextLink(); 91 lastLink(); 92 } 93 } 94 95 96 //最后一页 97 function last() { 98 if (pageCount() <= 1) { 99 } 100 else { 101 hideTable();//隐藏所有行 102 page = pageCount();//将当前页设置为最大页数 103 pageNum2.value = page; 104 currentRow = pageSize * (page - 1)+1;//获取最后一页的第一行行号 105 for (var i = currentRow; i < numberRowsInTable+1; i++) {//显示表格中最后一页信息 106 theTable.rows[i].style.display = ''; 107 } 108 109 showPage(); 110 lastNoLink(); 111 nextNoLink(); 112 preLink(); 113 firstLink(); 114 } 115 } 116 117 118 function hideTable() {//隐藏表格内容 119 for (var i = 0; i < numberRowsInTable+1; i++) { 120 theTable.rows[i].style.display = 'none'; 121 } 122 theTable.rows[0].style.display = '';//标题栏显示 123 } 124 125 126 function showPage() {//设置当前页数 127 pageNum.innerHTML = page; 128 } 129 130 function inforCount() {//设置总记录数 131 spanTotalInfor.innerHTML = numberRowsInTable; 132 } 133 134 //总共页数 135 function pageCount() { 136 var count = 0; 137 if (numberRowsInTable % pageSize != 0) count = 1; 138 return parseInt(numberRowsInTable / pageSize) + count; 139 } 140 141 142 //显示链接 link方法将相应的文字变成可点击翻页的 nolink方法将对应的文字变成不可点击的 143 function preLink() { spanPre.innerHTML = "<a href='javascript:pre();'></a>"; } 144 function preNoLink(){ spanPre.innerHTML = "previous"; } 145 146 function nextLink() { spanNext.innerHTML = "<a href='javascript:next();'>next</a>"; } 147 function nextNoLink(){ spanNext.innerHTML = "next";} 148 149 function firstLink() { spanFirst.innerHTML = "<a href='javascript:first();'>first page</a>"; } 150 function firstNoLink(){ spanFirst.innerHTML = "first page";} 151 152 function lastLink() { spanLast.innerHTML = "<a href='javascript:last();'>final page</a>"; } 153 function lastNoLink(){ spanLast.innerHTML = "final page";} 154 155 //初始化表格 156 function hide() { 157 for (var i = pageSize + 1; i < numberRowsInTable+1 ; i++) { 158 theTable.rows[i].style.display = 'none'; 159 } 160 theTable.rows[0].style.display = ''; 161 162 inforCount(); 163 164 totalPage.innerHTML = pageCount(); 165 showPage(); 166 pageNum2.value = page; 167 168 if (pageCount() > 1) { 169 nextLink(); 170 lastLink(); 171 } 172 173 } 174 175 hide();
对于jsp页面：
1 <table class="table table-bordered table-hover tablesorter tablecenter text-nowrap " id="theTable">/*注意这个id，下方为了识别必须要给table标上id*/ 2 <thead> 3 <tr> 4 <th>用户ID <i class="fa fa-sort" ></i></th> 5 <th>用户名 <i class="fa fa-sort"></i></th> 6 <th>所属院系ID <i class="fa fa-sort"></i></th> 7 <th>所属院系名称 <i class="fa fa-sort"></i> 8 </tr> 9 </thead> 10 <tbody> 11 <% 12 13 14 //数据库jdbc的驱动装载 15 Class.forName("com.mysql.jdbc.Driver").newInstance(); 16 //建立数据库连接 17 url = "jdbc:mysql://127.0.0.1:3306/managementsys?user=root&password=123456&useUnicode=true&characterEncoding=gb2312"; 18 conn = DriverManager.getConnection(url); 19 //建立一个Statement对象，用于执行sql语句 20 stat = conn.createStatement(); 21 //执行查询并且得到查询结果。 22 sql = "select identification.*,department.d_name from identification,department where identification.bzm=? and identification.d_id=department.d_id ";/*有网的时候查查表与表之间的连接怎么写。通过用户院系号标志用户院系名 */ 23 pstat = conn.prepareStatement(sql); 24 pstat.setString(1, bzm_id_f); 25 rs = pstat.executeQuery(); 26 27 String userid, username, userpsw, userdid,department_name; 28 //将查询的结果集中的记录输出到页面上。 29 while (rs.next()) { 30 userid = rs.getString("i_id").trim(); 31 username = rs.getString("i_name").trim(); 32 userdid = rs.getString("d_id").trim(); 33 department_name=rs.getString("d_name").trim(); 34 35 36 37 out.println("<tr>"); 38 out.println("<td>" + userid + "</td>"); 39 out.println("<td>" + username + "</td>"); 40 out.println("<td>" + userdid + "</td>"); 41 out.println("<td>" + department_name+ "</td>"); 42 43 out.println("</tr>"); 44 } 45 %> 46 </tbody> 47 </table>
上面接着</table>后 为控制分页的部分
1 <div class="gridItem" style="padding: 5px; 250px; float: left; text-align: left; height: 20px; font-size: 15px;" > 2 共<span id="spanTotalInfor">${patientSize}</span> 条记录 3 当前第<span id="spanPageNum">${curPage}</span>页 4 共<span id="spanTotalPage">${pageCount}</span>页 5 </div> 6 <div class="gridItem" style="margin-left:50px; padding: 5px; 400px; float: left; text-align: center; height: 20px; vertical-align: middle; font-size: 15px;"> 7 <span id="spanFirst" >first page</span> 8 <span id="spanPre">previous</span> 9 <span id="spanInput" style="margin: 0px; padding: 0px 0px 4px 0px; height:100%; "> 10 第<input id="Text1" type="text" class="TextBox" onkeyup="changepage()" style="height:20px; text-align: center;50px" />页 11 </span> 12 <span id="spanNext">next</span> 13 <span id="spanLast">final page</span> 14 </div> 15
紧跟着上面控制分页的模块，下面写的是java script的部分
注意：java script引入js的部分必须写在控制分页板块的后面
<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>