js代码(需要用到jquery库)如下：

 
  
  1. /* set the css style of paging indictor*/ 
  2.     $(function(){  
  3.           
  4.         // get the total countes of recipients  
  5.         //var totalRecipients = $("input[type=hidden][name=totalRecipients]").val();  
  6.          totalRecipients = 1000;  
  7.         // set the page size  
  8.         /* pageSize = $("input[type=hidden][name=pageSize]").val()  
  9.            if(parseInt(pageSize)<=0) then ...  
  10.         */ 
  11.          pageSize = $("select[name=pageSize]").val();  
  12.          pageSize = parseInt(pageSize,10);  
  13.         // calc the total page count  
  14.         if( totalRecipients%pageSize > 0)  
  15.             pageCount = totalRecipients/pageSize+1;  
  16.         else 
  17.             pageCount = totalRecipients/pageSize;  
  18.         // get the currentPage  
  19.         // currentPage = $("input[type=hidden][name=currentPage]").val();  
  20.         currentPage = 1;    // default  
  21.         beforePage = 0;  
  22.         $(".pageLink").click(function(){  
  23.               
  24.             var linkId = $(this).attr("id");  
  25.             if(linkId == "firstPage"){  
  26.                 beforePage = currentPage;  
  27.                 currentPage = 1;  
  28.                 jumpTo(currentPage);  
  29.             }  
  30.             else if(linkId == "lastPage"){  
  31.                 beforePage = currentPage;  
  32.                 currentPage = pageCount;  
  33.                 jumpTo(currentPage);  
  34.             }  
  35.             else if(linkId == "prevPage"){  
  36.                 if(currentPage>1) {  
  37.                     beforePage = currentPage;  
  38.                     currentPage -= 1;  
  39.                     jumpTo(currentPage);  
  40.                 }  
  41.             }  
  42.             else if(linkId == "nextPage"){  
  43.                 if(currentPage < pageCount) {  
  44.                     beforePage = currentPage;  
  45.                     currentPage +=1;  
  46.                     jumpTo(currentPage);  
  47.                 }  
  48.             }else if(linkId == "otheres"){  
  49.                 beforePage = currentPage;  
  50.                 currentPage= Math.ceil(currentPage/10)*10+1;  
  51.                 jumpTo(currentPage);  
  52.             }  
  53.             else{  
  54.                 beforePage = currentPage;  
  55.                 currentPage = linkId.substring(1,2);  
  56.                 jumpTo(currentPage);  
  57.             }  
  58.         });  
  59.         jumpTo(currentPage);  
  60.                   
  61.     });  
  62.       
  63.     function jumpTo(currPage){  
  64.         beforePage = currentPage;  
  65.         currentPage = currPage;  
  66.         appendSpan();  
  67.         var currId = "#_"+currPage+"_";  
  68.         var prevId = "#_"+prevPage+"_";  
  69.         $(currId).parent().find("a").removeClass("active");  
  70.         $(currId).addClass("active");  
  71.         $(prevId).addClass("visited");  
  72.         // hide the others span  
  73.         if(Math.ceil(currentPage/10)*10 >= pageCount){  
  74.             $("#otheres").hide();  
  75.         }else{$("#otheres").show();}  
  76.           
  77.     }  
  78.     function appendSpan(){  
  79.         // add every page into the page indicator             
  80.         var pageStr="";  
  81.                   
  82.         var baseCount = Math.floor((currentPage-1)/10)*10;  
  83.         var tt = baseCount+10;  
  84.         if(tt > pageCount){  
  85.             for(var index = baseCount+1;index <= pageCount;index++){  
  86.                 pageStr += " <a class='pageLink' οnclick='jumpTo("+index+")' id='_"+index+"_'>"+index+"</a> ";                
  87.             }  
  88.         }else{  
  89.             for(var index = baseCount+1;index <= baseCount+10;index++){  
  90.                 pageStr += " <a class='pageLink' οnclick='jumpTo("+index+")' id='_"+index+"_'>"+index+"</a> ";                
  91.             }  
  92.         }  
  93.         $("#pages").html(pageStr);  
  94.         return;  
  95.     } 
 
  
相应的HTML代码如下：
  
 
  
 
  
  1. <div id="PagingIndicator" style="text-align:center"> 
  2.             <span id="firstPage" class="pageLink">First</span> 
  3.             <span id="prevPage" class="pageLink">Prev</span> 
  4.             <span id="pages"></span> 
  5.             <span id="otheres" class="pageLink" title="other pages">...</span> 
  6.             <span id="nextPage" class="pageLink">Next</span> 
  7.             <span id="lastPage" class="pageLink">Last</span> 
  8.             <span> 
  9.                 <select id="pageSize" name="pageSize"> 
  10.                     <option label="10" value="10" selected="selected"/> 
  11.                     <option label="50" value="50"/> 
  12.                     <option label="100" value="100"/> 
  13.                     <option label="500" value="500"/> 
  14.                 </select> 
  15.             </span> 
  16.             <span>records per page.</span> 
  17.         </div> 
 
  
效果图如下：