jsp 假分页的实现

原本做毕设做了一堆表格需要读出数据。为了以后的数据可能会很多做准备，这里实现一个以基于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; width: 250px; float: left; text-align: left; height: 20px; font-size: 15px;" > 
 2                共<span id="spanTotalInfor">${patientSize}</span> 条记录&nbsp; &nbsp;     
 3                                       当前第<span id="spanPageNum">${curPage}</span>页     
 4                 &nbsp; &nbsp; &nbsp; 共<span id="spanTotalPage">${pageCount}</span>页
 5             </div>
 6         <div class="gridItem" style="margin-left:50px;  padding: 5px; width: 400px; float: left; text-align: center; height: 20px; vertical-align: middle; font-size: 15px;">   
 7             <span id="spanFirst" >first page</span> &nbsp; 
 8             <span id="spanPre">previous</span>&nbsp; 
 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;width:50px" />页 
11             </span>&nbsp; 
12             <span id="spanNext">next</span> &nbsp; 
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>

秒客网

jsp 假分页的实现

相关文章