原本做毕设做了一堆表格需要读出数据。为了以后的数据可能会很多做准备，这里实现一个以基于jsp页面实现的假分页。
假分页：实际上数据库一次过把所有数据读出来，通过对输出展示的控制来实现对数据分页的假象。
假分页方式合适于数据量比较小的数据展示，展示数据的速度比较快。但是当数据一次读取量比较大的时候，有可能会造成页面的崩溃。
网上找了好久的事例，摸索了好久才试验成功。
注意三点：
1、table标签里要标记可以标识此表格的id
2、引入pagging.js的访问路径不要出错
3、java script里对控制分页模块的标识那里对于table的识别id必须与1中填写的一致
核心代码：
首先，引入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 = "previous"; } function nextLink() { spanNext.innerHTML = "<a href='javascript:next();'>next</a>"; }
function nextNoLink(){ spanNext.innerHTML = "next";} function firstLink() { spanFirst.innerHTML = "<a href='javascript:first();'>first page</a>"; }
function firstNoLink(){ spanFirst.innerHTML = "first page";} function lastLink() { spanLast.innerHTML = "<a href='javascript:last();'>final page</a>"; }
function lastNoLink(){ spanLast.innerHTML = "final page";} //初始化表格
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();
对于jsp页面：
<table class="table table-bordered table-hover tablesorter tablecenter text-nowrap " id="theTable">/*注意这个id，下方为了识别必须要给table标上id*/
<thead>
<tr>
<th>用户ID <i class="fa fa-sort" ></i></th>
<th>用户名 <i class="fa fa-sort"></i></th>
<th>所属院系ID <i class="fa fa-sort"></i></th>
<th>所属院系名称 <i class="fa fa-sort"></i>
</tr>
</thead>
<tbody>
<% //数据库jdbc的驱动装载
Class.forName("com.mysql.jdbc.Driver").newInstance();
//建立数据库连接
url = "jdbc:mysql://127.0.0.1:3306/managementsys?user=root&password=123456&useUnicode=true&characterEncoding=gb2312";
conn = DriverManager.getConnection(url);
//建立一个Statement对象，用于执行sql语句
stat = conn.createStatement();
//执行查询并且得到查询结果。
sql = "select identification.*,department.d_name from identification,department where identification.bzm=? and identification.d_id=department.d_id ";/*有网的时候查查表与表之间的连接怎么写。通过用户院系号标志用户院系名 */
pstat = conn.prepareStatement(sql);
pstat.setString(1, bzm_id_f);
rs = pstat.executeQuery(); String userid, username, userpsw, userdid,department_name;
//将查询的结果集中的记录输出到页面上。
while (rs.next()) {
userid = rs.getString("i_id").trim();
username = rs.getString("i_name").trim();
userdid = rs.getString("d_id").trim();
department_name=rs.getString("d_name").trim(); out.println("<tr>");
out.println("<td>" + userid + "</td>");
out.println("<td>" + username + "</td>");
out.println("<td>" + userdid + "</td>");
out.println("<td>" + department_name+ "</td>"); out.println("</tr>");
}
%>
</tbody>
</table>
上面接着</table>后 为控制分页的部分
<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" >first page</span>
<span id="spanPre">previous</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">next</span>
<span id="spanLast">final page</span>
</div>
紧跟着上面控制分页的模块，下面写的是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>