整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
開發過程中，經常做的一件事，也是最基本的事，就是從數據庫中查詢數據，然后在客戶端顯示出來。當數據少時，可以在一個頁面內顯示完成。然而，如果查詢記錄是幾百條、上千條呢？直接一個頁面顯示完全的話，表格得多長啊。。。。。。這時，我們可以用分頁技術。
何為分頁？效果圖如下：
這里總共查詢了100條記錄，如果一次性顯示的話表格會很多行，用戶體驗不佳。而我們采用分頁顯示的話，一頁顯示10條記錄，共十頁。用戶可以自行翻閱，記錄少，清晰顯示。
下面談談分頁效果的實現，思路有三種：
其一：純JS實現分頁。一次性查詢記錄并加載到html的table中。然后通過選擇性地顯示某些行來達到分頁顯示的目的。這是一種偽分頁，障眼法而已。只能用于數據少的情況下。一旦數據多了，十幾萬條數據加載到html中會變得很慢。而且不實時，一次加載完后數據就寫死在頁面了，若數據庫中有變化，瀏覽器端顯示的仍是上次加載過來的數據。
首先：用table來顯示查詢出來的記錄們，全部顯示。
<table width="500" id="idData">
<%
String user_id, user_name, user_sex, user_phone, user_age;
while (sqlRst.next()) {
user_id=sqlRst.getString(1);
user_name=sqlRst.getString(2);
user_sex=sqlRst.getString(3);
user_phone=sqlRst.getString(4);
user_age=sqlRst.getString(5);
%>
<tr>
<td><%=user_id%></td>
<td><%=user_name%></td>
<td><%=user_sex%></td>
<td><%=user_phone%></td>
<td><%=user_age%></td>
</tr>
<%
}
%>
</table>
<br/>
<table width="60%" align="right">
<tr><td><div id="changePages" name="changePages"></div></td></tr>
</table>
然后，在JS中修改table中某些行顯示，某些行隱藏。
<script type="text/javascript">
function goPage(pno,psize){
var itable=document.getElementById("idData");//獲取table
var num=itable.rows.length;//得到記錄總數
var totalPage=0;
var pageSize=psize;//一頁顯示pageSize條記錄
//計算總頁數
if(num/pageSize > parseInt(num/pageSize)){
totalPage=parseInt(num/pageSize)+1;
}else{
totalPage=parseInt(num/pageSize);
}
//當前頁數
var currentPage=pno;
//獲取當前頁第一條、最后一條記錄的行號
var startRow=(currentPage - 1) * pageSize+1;
var endRow=currentPage * pageSize;
endRow=(endRow > num)? num : endRow;
//修改table中當前頁對應的行的屬性為顯示，非本頁的記錄為隱藏
for(var i=1;i<(num+1);i++){
var irow=itable.rows[i-1];
if(i>=startRow && i<=endRow){
irow.style.display="block";
}else{
irow.style.display="none";
}
}
//分頁頁碼列表
var tempStr="共"+num+"條記錄 分"+totalPage+"頁 當前第"+currentPage+"頁";
if(currentPage>1){
tempStr +="<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首頁</a>";
tempStr +="<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\"><上一頁</a>"
}else{
tempStr +="首頁";
tempStr +="<上一頁";
}
if(currentPage<totalPage){
tempStr +="<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一頁></a>";
tempStr +="<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾頁</a>";
}else{
tempStr +="下一頁>";
tempStr +="尾頁";
}
document.getElementById("changePages").innerHTML=tempStr;
}
</script>
其二：一次查詢，分批顯示。
就是說，我們可以執行一個數據庫查詢操作，得到結果集rs。然后，通過指針的移動來顯示當前頁面的記錄。這樣，就可以以 rs.absolute(當前頁面號*每頁記錄數)定位到當前頁的第一條記錄，然后通過while循環顯示n條記錄（n為每頁顯示記錄數）。在跳頁時，只需修改currentPage，即可在重定位到下一頁時把當前頁面號改掉，重新定位記錄指針，通過while遍歷顯示n條記錄。與JS選擇性顯示不同，這里是選擇性遍歷。與JS分頁不同的是，這里分頁每次跳頁修改的是遍歷的指針，每次跳頁都要進行一次全面查詢。同樣地，不適合大數據量查詢。這里比JS分頁優化的地方在于——實時性。每次跳頁都會查詢一次數據庫，保證數據的實時性。
參考代碼：
<%
int intPageSize=10; //一頁顯示的記錄數 int intRowCount; //記錄總數
int intPageCount; //總頁數
String strPage; //從表單或URL傳送的待顯示頁碼
int intPage; //待顯示頁碼 ，由strPage轉換成的整數
//---計算記錄總數的第一種方法：查詢出所有記錄，移動結果集指針到最后一條，獲取最后一條記錄的行號
//查詢所有數據 ResultSet sqlRst=sqlStmt.executeQuery("select * from user");
//獲取記錄總數
sqlRst.last(); //光標在最后一行
intRowCount=sqlRst.getRow(); //獲得當前行號，即總記錄數
//記算總頁數
intPageCount=(int)Math.ceil(intRowCount/(intPageSize*1.0));
//將記錄指針定位到待顯示頁的第一條記錄上
sqlRst.absolute((intPage - 1) * intPageSize + 1);
//顯示數據
int i=0;
String user_id, user_name, user_sex, user_phone, user_age;
while (i < intPageSize && !sqlRst.isAfterLast()) {
user_id=sqlRst.getString(1);
user_name=sqlRst.getString(2);
user_sex=sqlRst.getString(3);
user_phone=sqlRst.getString(4);
user_age=sqlRst.getString(5);
%>
<tr>
<td><%=user_id%></td>
<td><%=user_name%></td>
<td><%=user_sex%></td>
<td><%=user_phone%></td>
<td><%=user_age%></td>
</tr>
<%
sqlRst.next();//移動記錄指針指向下一條記錄
i++;//統計當前頁已顯示多少條記錄
}
%>
其三：在服務端分頁。跳到第n頁才查詢、顯示第n頁內容。要點就是根據客戶端表格的“頁面”計算出數據庫要查詢的當前頁面的第一條記錄的位置。優點：實時性：跳頁才查詢。數據量?。褐患虞d當前頁的記錄進行顯示。
重點在于兩條語句：select count(*) from ...:查詢得到記錄總條數
select * from .. limit pageNo,rowsCount:查詢從第pageNo條開始的rowsCount條數據。
int pages=0; //待顯示頁面
int count=0; //總條數
int totalpages=0; //總頁數
int limit=10; //每頁顯示記錄條數
//計算記錄總數的第二種辦法：使用mysql的聚集函數count(*)
ResultSet sqlRst=sqlStmt.executeQuery("select count(*) from user");
if(sqlRst.next()){
count=sqlRst.getInt(1);//結果為count(*)表，只有一列。這里通過列的下標索引（1）來獲取值
}
//由記錄總數除以每頁記錄數得出總頁數
totalpages=(int)Math.ceil(count/(limit*1.0));
//獲取跳頁時傳進來的當前頁面參數
String strPage=request.getParameter("pages");
//判斷當前頁面參數的合法性并處理非法頁號（為空則顯示第一頁，小于0則顯示第一頁，大于總頁數則顯示最后一頁）
if (strPage==null) {
pages=1;
} else {
try{
pages=java.lang.Integer.parseInt(strPage);
}catch(Exception e){
pages=1;
}
if (pages < 1){
pages=1;
}
if (pages > totalpages){
pages=totalpages;
}
}
//由(pages-1)*limit算出當前頁面第一條記錄，由limit查詢limit條記錄。則得出當前頁面的記錄
sqlRst=sqlStmt.executeQuery("select * from user order by user_id limit " + (pages - 1) * limit + "," + limit);
while (sqlRst.next()){//遍歷顯示}
跳頁的實現：跳頁是通過重定向來實現的，通過向當前網頁傳進待顯示的pages，在跳轉后根據pages重新算出頁面顯示的第一條，查limit條顯示。
<form name="f1" method="POST" action="index.jsp" onSubmit="return checknum()">
<table border="0" align="center" >
<tr>
<td>第<%=pages%>頁 共<%=totalpages%>頁 <a href="index.jsp?pages=1">首頁</a></td>
<td><a href="index.jsp?pages=<%=(pages<1)?pages:(pages-1) %>"> 上一頁</a></td>
<td><a href="index.jsp?pages=<%=(pages>=totalpages)?totalpages:(pages+1)%>"> 下一頁</a></td>
<td><a href="index.jsp?pages=<%=totalpages%>">最后一頁</a></td>
<td>轉到第:<input type="text" name="page" size="8">頁<input type="submit" value="GO" name="cndok"></td>
</tr>
</table>
</form>
附：常見數據庫分頁查詢語句
1.oracle數據庫分頁
select * from (select a.*,rownum rc from 表名 where rownum<=endrow) a where a.rc>=startrow
2.DB2數據庫分頁
Select * from (select rownumber() over() as rc,a.* from (select * from 表名 order by列名) as a) where rc between startrow and endrow
3.SQL Server 2000數據庫分頁
Select top pagesize * from 表名 where 列名 not in(select top pagesize*page 列名 from 表名 order by列名) order by列名
4.SQL Server 2005數據庫分頁
Select * from (select 列名,row_number() over(order by 列名1) as 別名from 表名) as t where t.列名1>=startrow and t.列名1<=endrow
5.MySQL數據庫分頁
Select * from 表名 limit startrow,pagesize
(Pagesize為每頁顯示的記錄條數)
6.PostgreSQL數據庫分頁
Select * from 表名 limit pagesize,offset startrow
(Pagesize為每頁顯示的記錄條數)
轉載請注明原文地址：http://www.cnblogs.com/ygj0930/p/6134851.html
站分頁功能是必不可少的，一般用在列表頁面中，javascript實現分頁效果，效果如下：
實現代碼
html結構：
CSS樣式：
javascript：
些推薦網站頁面里，很經常會看到那些推薦的內容在切換展示。實現的原理是后臺定時切換發布的內容。今天我主要來說說用Jquery來實現列表分頁顯示效果。這個列表一共9條數據，假設，初始化的時候我們不顯示全部數據，要分3次顯示，當每點擊一次"換一批"按鈕，就會顯示不同的數據效果如下：
點擊“換一批”后的效果：
代碼如下：
html:
css:
js:
從上面的代碼可以看出來實現起來很簡單，比如怎么控制超過顯示數據的數據直接用css來處理，分來直接用jq的slice方法!
大家有什么更好的實現方法，歡迎提出來一起分享~~
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
