最近這幾天在做JSP留言板設計的過程中，遇到了一個問題。先看一張截圖：
這是隨便在一個新聞的留言頁面截的圖，假如留言條數(shù)太多，那整個頁面得排好長好長，這就直接給用戶造成了麻煩、不舒服的感受，所以，解決這個問題，通常采用分頁顯示的方法。
要把頁面顯示方式設計成這樣的方式，通常需要用到這幾個基本變量：pageSize（每個頁面所顯示的記錄數(shù)）、pageCount（一共有多少個頁面）、showPage（目前顯示第幾頁）、recordCount（總的記錄數(shù)），為了方便理解，畫了一張圖：
如果想要把頁面顯示做成這樣的效果，在這張圖中pageSize=4，pageCount=3,showPage=1,recordCount=12。思路是，如果要顯示那個頁面，就要先算出來每個頁面第一條記錄是所有記錄中的第幾條記錄，假設每頁的第一條記錄是總記錄中的第position條記錄，那么position=（ShowPage - 1）×PageSize+1。比如上圖這個例子，如果要顯示第一頁，就要計算出第一頁中的第一條記錄是總的記錄中的第一條記錄；如果要顯示第二頁，就要計算出第二頁中的第一條記錄是總的記錄中的第四條記錄；如果要顯示第三頁，就要計算出第一頁中的第一條記錄是總的記錄中的第九條記錄。
在JSP中的核心代碼為如下（用的數(shù)據(jù)庫為MySQL）：
復制代碼 代碼如下:
%! int pageSize=4;
int pageCount;
int showPage;
%>
!-- 連接數(shù)據(jù)庫并從數(shù)據(jù)庫中調(diào)取記錄-->
%
Connection con;
Statement sql;
ResultSet rs;
try{Class.forName("com.mysql.jdbc.Driver");
}catch(ClassNotFoundException e){
}
try{con=DriverManager.getConnection("jdbc:mysql://localhost:3306/message board","root","123456");
sql=con.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,ResultSet.CONCUR_READ_ONLY);
//返回可滾動的結(jié)果集
rs=sql.executeQuery("select * from messageinfo");
//將游標移到最后一行
rs.last();
//獲取最后一行的行號
int recordCount=rs.getRow();
//計算分頁后的總數(shù)
pageCount=(recordCount%pageSize==0)?(lastRow/pageSize):(lastRow/pageSize+1);
//獲取用戶想要顯示的頁數(shù)：
String integer=request.getParameter("showPage");
if(integer==null){
integer="1";
}
try{showPage=Integer.parseInt(integer);
}catch(NumberFormatException e){
showPage=1;
}
if(showPage=1){
showPage=1;
}
if(showPage>=pageCount){
showPage=pageCount;
}
//如果要顯示第showPage頁，那么游標應該移動到的position的值是：
int position=(showPage-1)*pageSize+1;
//設置游標的位置
rs.absolute(position);
//用for循環(huán)顯示本頁中應顯示的的記錄
for(int i=1;i=pageSize;i++){
%>
table>
tr>
th>%=rs.getString("UserName") %>/th>
td>發(fā)表于：%=rs.getString("datetime") %>/td>
/tr>
tr >
th colspan="3">textarea>%=rs.getString("content") %>/textarea>/th>
/tr>
/table>
%
rs.next();
}
rs.close();
con.close();
}
catch(Exception e){
e.printStackTrace();}
%>
br>
第%=showPage %>頁（共%=pageCount %>頁）
br>
a href="ShowMessages.jsp?showPage=1">首頁/a>
a href="ShowMessages.jsp?showPage=%=showPage-1%>">上一頁/a>
% //根據(jù)pageCount的值顯示每一頁的數(shù)字并附加上相應的超鏈接
for(int i=1;i=pageCount;i++){
%>
a href="ShowMessages.jsp?showPage=%=i%>">%=i%>/a>
% }
%>
a href="ShowMessages.jsp?showPage=%=showPage+1%>">下一頁/a>
a href="ShowMessages.jsp?showPage=%=pageCount%>">末頁/a>
!-- 通過表單提交用戶想要顯示的頁數(shù) -->
form action="" method="get">
跳轉(zhuǎn)到第input type="text" name="showPage" size="4">頁
input type="submit" name="submit" value="跳轉(zhuǎn)">
/form>
運行結(jié)果如下（為了簡化代碼，已經(jīng)網(wǎng)頁布局相關(guān)代碼去掉，此處僅指功能）：
可以跳轉(zhuǎn)到首頁、上一頁、下一頁、末頁，可以手動在數(shù)字上指定頁數(shù)，也可以在輸入框中輸入要顯示的頁數(shù)。
您可能感興趣的文章:- 原生JS實現(xiàn)分頁點擊控件
- JS實現(xiàn)前端分頁效果
- js實現(xiàn)簡單的前端分頁效果
- 純javascript實現(xiàn)分頁(兩種方法)
- 非常不錯的一個JS分頁效果代碼，值得研究
- 利用js制作html table分頁示例(js實現(xiàn)分頁)
- 純js分頁代碼(簡潔實用)
- js分頁顯示div的內(nèi)容
- JS實現(xiàn)的簡單分頁功能示例
- 原生JS實現(xiàn)酷炫分頁效果
