JS分頁函數:
1 //pageSize必需,totalRecords:必需,startIndex必需,contenter必需
2 function pageNavBar(config){
3 //alert("pagesize:"+config.pageSize+" total:"+config.totalRecords+" unknowsss:"+config.startIndex);
4 var lastPage=0;
5 var startIndex=0;
6 var thisPage=1;
7 var template={firstPageLabel:"<<",previousPageLabel:"<",nextPageLabel:">",lastPageLabel:">>"};
8 var pfx=typeof(config.pfx)!="undefined"?config.pfx:"";
9 var param=typeof(config.param)!="undefined"?"&"+config.param:"";
10
11 if(typeof(config.template)!="undefined"){
12 template=config.template;
13 }
14 var totalPage=parseInt((config.totalRecords-1)/config.pageSize)+1;
15 totalPage=totalPage<1?1:totalPage;
16
17 var navStr="";
18
19 navStr=navStr+" <a href='"+config.url+"?"+pfx+"startIndex=0"+param+"' >"+template.firstPageLabel+"</a>"; //首頁
20 startIndex=(config.startIndex-config.pageSize)<=0?0:(config.startIndex-config.pageSize);
21 navStr=navStr+" <a href='"+config.url+"?"+pfx+"startIndex="+startIndex+param+"' >"+template.previousPageLabel+"</a>";//上一頁
22
23 thisPage=parseInt(config.startIndex/15)+1;
24
25 for(var i=-5;i<6;i++){
26 if((thisPage+i)>=0 && (thisPage+i)<totalPage){
27 startIndex=(thisPage+i)*config.pageSize;
28 if(startIndex==config.startIndex){
29 navStr=navStr+" <strong>["+(thisPage+i+1)+"]</strong>";
30 }else{
31 navStr=navStr+" <a href='"+config.url+"?"+pfx+"startIndex="+startIndex+param+"' >"+(thisPage+i+1)+"</a>";
32 }
33 }
34 }
35
36 startIndex=(config.startIndex+config.pageSize)>=config.totalRecords?(totalPage-1)*config.pageSize:config.startIndex+config.pageSize;
37 navStr=navStr+" <a href='"+config.url+"?"+pfx+"startIndex="+startIndex+param+"' >"+template.nextPageLabel+"</a>";//下一頁
38 startIndex=(totalPage-1)*config.pageSize;
39 navStr=navStr+" <a href='"+config.url+"?"+pfx+"startIndex="+startIndex+param+"' >"+template.lastPageLabel+"</a>";//末頁
40 if(config.contenter.constructor==Array){
41 $(config.contenter).each(function(){
42 $("#"+this).html(navStr);
43 });
44 }else{
45 $("#"+config.contenter).html(navStr);
46 }
47 }
頁面調用方法:
$(document).ready(function(){
var myconfig={
pageSize:<s:property value="pages.pageSize" default="1"/>,
totalRecords:<s:property value="pages.totalRecords" default="0"/>,
startIndex:<s:property value="pages.startIndex" default="0"/>,
url:"${contextPath}/p/phone!list.act",
pfx:"pages.",
contenter:["pags","pagsTop"], //在ID為pags,pagsTop的div里顯示導航
template:{firstPageLabel:"首頁",previousPageLabel:"上一頁",nextPageLabel:"Next",lastPageLabel:"Last"},
param:"form.cid=<s:property value='form.cid' default='0' />"
};
pageNavBar(myconfig);
});
服務端,因為我用的是mysql,所以只要有startIndex,pagesize就可以分頁了,當然還要傳個totalRecords回來,可以提供給JS使用.