js代码(需要用到jquery库)如下:
- /* set the css style of paging indictor*/
- $(function(){
- // get the total countes of recipients
- //var totalRecipients = $("input[type=hidden][name=totalRecipients]").val();
- totalRecipients = 1000;
- // set the page size
- /* pageSize = $("input[type=hidden][name=pageSize]").val()
- if(parseInt(pageSize)<=0) then ...
- */
- pageSize = $("select[name=pageSize]").val();
- pageSize = parseInt(pageSize,10);
- // calc the total page count
- if( totalRecipients%pageSize > 0)
- pageCount = totalRecipients/pageSize+1;
- else
- pageCount = totalRecipients/pageSize;
- // get the currentPage
- // currentPage = $("input[type=hidden][name=currentPage]").val();
- currentPage = 1; // default
- beforePage = 0;
- $(".pageLink").click(function(){
- var linkId = $(this).attr("id");
- if(linkId == "firstPage"){
- beforePage = currentPage;
- currentPage = 1;
- jumpTo(currentPage);
- }
- else if(linkId == "lastPage"){
- beforePage = currentPage;
- currentPage = pageCount;
- jumpTo(currentPage);
- }
- else if(linkId == "prevPage"){
- if(currentPage>1) {
- beforePage = currentPage;
- currentPage -= 1;
- jumpTo(currentPage);
- }
- }
- else if(linkId == "nextPage"){
- if(currentPage < pageCount) {
- beforePage = currentPage;
- currentPage +=1;
- jumpTo(currentPage);
- }
- }else if(linkId == "otheres"){
- beforePage = currentPage;
- currentPage= Math.ceil(currentPage/10)*10+1;
- jumpTo(currentPage);
- }
- else{
- beforePage = currentPage;
- currentPage = linkId.substring(1,2);
- jumpTo(currentPage);
- }
- });
- jumpTo(currentPage);
- });
- function jumpTo(currPage){
- beforePage = currentPage;
- currentPage = currPage;
- appendSpan();
- var currId = "#_"+currPage+"_";
- var prevId = "#_"+prevPage+"_";
- $(currId).parent().find("a").removeClass("active");
- $(currId).addClass("active");
- $(prevId).addClass("visited");
- // hide the others span
- if(Math.ceil(currentPage/10)*10 >= pageCount){
- $("#otheres").hide();
- }else{$("#otheres").show();}
- }
- function appendSpan(){
- // add every page into the page indicator
- var pageStr="";
- var baseCount = Math.floor((currentPage-1)/10)*10;
- var tt = baseCount+10;
- if(tt > pageCount){
- for(var index = baseCount+1;index <= pageCount;index++){
- pageStr += " <a class='pageLink' οnclick='jumpTo("+index+")' id='_"+index+"_'>"+index+"</a> ";
- }
- }else{
- for(var index = baseCount+1;index <= baseCount+10;index++){
- pageStr += " <a class='pageLink' οnclick='jumpTo("+index+")' id='_"+index+"_'>"+index+"</a> ";
- }
- }
- $("#pages").html(pageStr);
- return;
- }
相应的HTML代码如下:
- <div id="PagingIndicator" style="text-align:center">
- <span id="firstPage" class="pageLink">First</span>
- <span id="prevPage" class="pageLink">Prev</span>
- <span id="pages"></span>
- <span id="otheres" class="pageLink" title="other pages">...</span>
- <span id="nextPage" class="pageLink">Next</span>
- <span id="lastPage" class="pageLink">Last</span>
- <span>
- <select id="pageSize" name="pageSize">
- <option label="10" value="10" selected="selected"/>
- <option label="50" value="50"/>
- <option label="100" value="100"/>
- <option label="500" value="500"/>
- </select>
- </span>
- <span>records per page.</span>
- </div>
效果图如下:
转载于:https://blog.51cto.com/zorro/906088