開發(fā)過程中，經(jīng)常做的一件事，也是最基本的事，就是從數(shù)據(jù)庫中查詢數(shù)據(jù)，然后在客戶端顯示出來。當(dāng)數(shù)據(jù)少時(shí)，可以在一個(gè)頁面內(nèi)顯示完成。然而，如果查詢記錄是幾百條、上千條呢？直接一個(gè)頁面顯示完全的話，表格得多長啊。。。。。。這時(shí)，我們可以用分頁技術(shù)。

何為分頁？效果圖如下：

這里總共查詢了100條記錄，如果一次性顯示的話表格會很多行，用戶體驗(yàn)不佳。而我們采用分頁顯示的話，一頁顯示10條記錄，共十頁。用戶可以自行翻閱，記錄少，清晰顯示。

下面談?wù)劮猪撔Ч膶?shí)現(xiàn)，思路有三種：

其一：純JS實(shí)現(xiàn)分頁。一次性查詢記錄并加載到html的table中。然后通過選擇性地顯示某些行來達(dá)到分頁顯示的目的。這是一種偽分頁，障眼法而已。只能用于數(shù)據(jù)少的情況下。一旦數(shù)據(jù)多了，十幾萬條數(shù)據(jù)加載到html中會變得很慢。而且不實(shí)時(shí)，一次加載完后數(shù)據(jù)就寫死在頁面了，若數(shù)據(jù)庫中有變化，瀏覽器端顯示的仍是上次加載過來的數(shù)據(jù)。

首先：用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;//得到記錄總數(shù)

var totalPage=0;

var pageSize=psize;//一頁顯示pageSize條記錄

//計(jì)算總頁數(shù)

if(num/pageSize > parseInt(num/pageSize)){

totalPage=parseInt(num/pageSize)+1;

}else{

totalPage=parseInt(num/pageSize);

}

//當(dāng)前頁數(shù)

var currentPage=pno;

//獲取當(dāng)前頁第一條、最后一條記錄的行號

var startRow=(currentPage - 1) * pageSize+1;

var endRow=currentPage * pageSize;

endRow=(endRow > num)? num : endRow;

//修改table中當(dāng)前頁對應(yīng)的行的屬性為顯示，非本頁的記錄為隱藏

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+"頁 當(dāng)前第"+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>

其二：一次查詢，分批顯示。

就是說，我們可以執(zhí)行一個(gè)數(shù)據(jù)庫查詢操作，得到結(jié)果集rs。然后，通過指針的移動來顯示當(dāng)前頁面的記錄。這樣，就可以以 rs.absolute(當(dāng)前頁面號*每頁記錄數(shù))定位到當(dāng)前頁的第一條記錄，然后通過while循環(huán)顯示n條記錄（n為每頁顯示記錄數(shù)）。在跳頁時(shí)，只需修改currentPage，即可在重定位到下一頁時(shí)把當(dāng)前頁面號改掉，重新定位記錄指針，通過while遍歷顯示n條記錄。與JS選擇性顯示不同，這里是選擇性遍歷。與JS分頁不同的是，這里分頁每次跳頁修改的是遍歷的指針，每次跳頁都要進(jìn)行一次全面查詢。同樣地，不適合大數(shù)據(jù)量查詢。這里比JS分頁優(yōu)化的地方在于——實(shí)時(shí)性。每次跳頁都會查詢一次數(shù)據(jù)庫，保證數(shù)據(jù)的實(shí)時(shí)性。

參考代碼：

　　　　　　　　　　<%

　　　　　　　　　　 　int intPageSize=10; //一頁顯示的記錄數(shù) int intRowCount; //記錄總數(shù)

int intPageCount; //總頁數(shù)

String strPage; //從表單或URL傳送的待顯示頁碼

int intPage; //待顯示頁碼 ，由strPage轉(zhuǎn)換成的整數(shù)

　　　　　　　　//---計(jì)算記錄總數(shù)的第一種方法：查詢出所有記錄，移動結(jié)果集指針到最后一條，獲取最后一條記錄的行號

　　　　　　　　　　//查詢所有數(shù)據(jù) 　　　　　　　　ResultSet sqlRst=sqlStmt.executeQuery("select * from user");

　　　　　　　　 //獲取記錄總數(shù)

　　　　　　　　　sqlRst.last(); //光標(biāo)在最后一行

　　　　　　　　intRowCount=sqlRst.getRow(); //獲得當(dāng)前行號，即總記錄數(shù)

　　　　　　　　 //記算總頁數(shù)

　　　　　　　　 intPageCount=(int)Math.ceil(intRowCount/(intPageSize*1.0));

//將記錄指針定位到待顯示頁的第一條記錄上

sqlRst.absolute((intPage - 1) * intPageSize + 1);

//顯示數(shù)據(jù)

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++;//統(tǒng)計(jì)當(dāng)前頁已顯示多少條記錄

}

%>

其三：在服務(wù)端分頁。跳到第n頁才查詢、顯示第n頁內(nèi)容。要點(diǎn)就是根據(jù)客戶端表格的“頁面”計(jì)算出數(shù)據(jù)庫要查詢的當(dāng)前頁面的第一條記錄的位置。優(yōu)點(diǎn)：實(shí)時(shí)性：跳頁才查詢。數(shù)據(jù)量?。褐患虞d當(dāng)前頁的記錄進(jìn)行顯示。

重點(diǎn)在于兩條語句：select count(*) from ...:查詢得到記錄總條數(shù)

select * from .. limit pageNo,rowsCount:查詢從第pageNo條開始的rowsCount條數(shù)據(jù)。

int pages=0; //待顯示頁面

int count=0; //總條數(shù)

int totalpages=0; //總頁數(shù)

int limit=10; //每頁顯示記錄條數(shù)

//計(jì)算記錄總數(shù)的第二種辦法：使用mysql的聚集函數(shù)count(*)

ResultSet sqlRst=sqlStmt.executeQuery("select count(*) from user");

if(sqlRst.next()){

count=sqlRst.getInt(1);//結(jié)果為count(*)表，只有一列。這里通過列的下標(biāo)索引（1）來獲取值

}

//由記錄總數(shù)除以每頁記錄數(shù)得出總頁數(shù)

totalpages=(int)Math.ceil(count/(limit*1.0));

//獲取跳頁時(shí)傳進(jìn)來的當(dāng)前頁面參數(shù)

String strPage=request.getParameter("pages");

//判斷當(dāng)前頁面參數(shù)的合法性并處理非法頁號（為空則顯示第一頁，小于0則顯示第一頁，大于總頁數(shù)則顯示最后一頁）

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算出當(dāng)前頁面第一條記錄，由limit查詢limit條記錄。則得出當(dāng)前頁面的記錄

sqlRst=sqlStmt.executeQuery("select * from user order by user_id limit " + (pages - 1) * limit + "," + limit);

while (sqlRst.next()){//遍歷顯示}

跳頁的實(shí)現(xiàn)：跳頁是通過重定向來實(shí)現(xiàn)的，通過向當(dāng)前網(wǎng)頁傳進(jìn)待顯示的pages，在跳轉(zhuǎn)后根據(jù)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>轉(zhuǎn)到第:<input type="text" name="page" size="8">頁<input type="submit" value="GO" name="cndok"></td>

</tr>

</table>

</form>

附：常見數(shù)據(jù)庫分頁查詢語句

1.oracle數(shù)據(jù)庫分頁

select * from (select a.*,rownum rc from 表名 where rownum<=endrow) a where a.rc>=startrow

2.DB2數(shù)據(jù)庫分頁

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數(shù)據(jù)庫分頁

Select top pagesize * from 表名 where 列名 not in(select top pagesize*page 列名 from 表名 order by列名) order by列名

4.SQL Server 2005數(shù)據(jù)庫分頁

Select * from (select 列名,row_number() over(order by 列名1) as 別名from 表名) as t where t.列名1>=startrow and t.列名1<=endrow

5.MySQL數(shù)據(jù)庫分頁

Select * from 表名 limit startrow,pagesize

(Pagesize為每頁顯示的記錄條數(shù))

6.PostgreSQL數(shù)據(jù)庫分頁

Select * from 表名 limit pagesize,offset startrow

(Pagesize為每頁顯示的記錄條數(shù))

轉(zhuǎn)載請注明原文地址：http://www.cnblogs.com/ygj0930/p/6134851.html

站分頁功能是必不可少的，一般用在列表頁面中，javascript實(shí)現(xiàn)分頁效果，效果如下：

實(shí)現(xiàn)代碼

html結(jié)構(gòu)：

CSS樣式：

javascript：

些推薦網(wǎng)站頁面里，很經(jīng)常會看到那些推薦的內(nèi)容在切換展示。實(shí)現(xiàn)的原理是后臺定時(shí)切換發(fā)布的內(nèi)容。今天我主要來說說用Jquery來實(shí)現(xiàn)列表分頁顯示效果。這個(gè)列表一共9條數(shù)據(jù)，假設(shè)，初始化的時(shí)候我們不顯示全部數(shù)據(jù)，要分3次顯示，當(dāng)每點(diǎn)擊一次"換一批"按鈕，就會顯示不同的數(shù)據(jù)效果如下：

點(diǎn)擊“換一批”后的效果：

代碼如下：

html:

css:

js:

從上面的代碼可以看出來實(shí)現(xiàn)起來很簡單，比如怎么控制超過顯示數(shù)據(jù)的數(shù)據(jù)直接用css來處理，分來直接用jq的slice方法!

大家有什么更好的實(shí)現(xiàn)方法，歡迎提出來一起分享~~