Jquery Next Previous Pager

Question

我終於找到了一個能夠完成我的項目的插件。

但我意識到的一件事是，這個插件只有頁碼，但沒有下一個和上一個以及「...」來屏蔽多個頁碼，如果有很多。

這個插件是在2013年完成的，我認爲現在還沒有活着要求支持。我不擅長Javascript和Jquery，我不知道如何自己編寫代碼。

任何一種靈魂都能幫助我嗎？

下面是代碼：

$(document).ready(function() { 
    $('.search-res-list').each(function() { 
     var currentPage = 0; 
     var numPerPage = 4; 
     var $grid = $(this); 
     $grid.bind('repaginate', function() { 
      $grid.find('.search-res-row').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show(); 
     }); 
     $grid.trigger('repaginate'); 
     var numRows = $grid.find('.search-res-row').length; 
     var numPages = Math.ceil(numRows/numPerPage); 
     var $pager = $('<div class="pager">Page </div>'); 
     for (var page = 0; page < numPages; page++) { 
      $('<span class="page-number"></span>').text(page + 1).bind('click', { 
       newPage: page 
      }, function(event) { 
       currentPage = event.data['newPage']; 
       $grid.trigger('repaginate'); 
       $(this).addClass('active').siblings().removeClass('active'); 
      }).appendTo($pager).addClass('clickable'); 
     } 
     $pager.insertBefore($grid).find('span.page-number:first').addClass('active'); 
    }); 
}); 

在此先感謝您的幫助！

Answer 1

這裏是你如何一個和下一個按鈕添加到您的分頁，使他們的工作：

$('.search-res-list').each(function() { 
     var currentPage = 0; 
     var numPerPage = 4; 
     var $grid = $(this); 
     $grid.bind('repaginate', function() { 
      $grid.find('.search-res-row').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show(); 
     }); 
     $grid.trigger('repaginate'); 
     var numRows = $grid.find('.search-res-row').length; 
     var numPages = Math.ceil(numRows/numPerPage); 
     if(numPages < 10){ /* do this if you want to have 01,02 format (till 10 of course) */ 
      numPages = '0'+numPages; 
     }else{ 
      numPages = numPages; 
     } 
     if(numPages == 0){ 
      numPages = '01'; 
     } 
     var $pager = $('<div class="paged_links productNavLinks"><div class="content-area"><span class="pagexofy"></span></div></div>'); 
     var innerWrap = $pager.find('.pagexofy'); 
     for (var page = 0; page < numPages; page++) { 
      $('<span></span>').text(page + 1).bind('click', { 
       newPage: page 
      }, function(event) { 
       currentPage = event.data['newPage']; 
       $grid.trigger('repaginate'); 
       $(this).addClass('active').siblings().removeClass('active'); 
      }).appendTo(innerWrap).addClass('clickable'); 
     } 
     $pager.insertBefore($grid); 
     $pager.clone().insertAfter($grid); /* do this if you want to show pagination both on top and bottom */ 
     $pager.find('span.clickable:first').addClass('active'); 
     jQuery("span.clickable").each(function(){ 
      var currentText = jQuery(this).text(); 
      if(currentText < 10){ 
       var newText = '0'+currentText; 
       jQuery(this).text(newText); 
      } 
     }); 
     var firstNav = jQuery("span.clickable.active").text(); 
     var finalCount = '<span class="prev page-numbers"></span><span class="pageNavigation">PAGE <span class="firstPageNumLink">'+firstNav + '</span>/' + numPages+'</span><span class="next page-numbers"></span>'; 
     jQuery(".productNavLinks .pagexofy").append(finalCount); 

     jQuery(".paged_links.productNavLinks").each(function(){ 
      jQuery(this).find("span[class^='clickable']:first").addClass('firstPagerNav'); 
      jQuery(this).find("span[class^='clickable']:last").addClass('lastPagerNav'); 
     }); 

     jQuery(".paged_links.productNavLinks .next").click(function(){ 
      jQuery(".paged_links.productNavLinks span.clickable.active").next(".paged_links.productNavLinks span[class^='clickable']").click(); 
      var activeNav = jQuery("span.clickable.active").text(); 
      jQuery(".firstPageNumLink").text(activeNav); 
      if(jQuery(".clickable.firstPagerNav").hasClass('active')){ 
       jQuery(".paged_links.productNavLinks .prev").hide(); 
      }else{ 
       jQuery(".paged_links.productNavLinks .prev").show(); 
      } 
      if(jQuery(".clickable.lastPagerNav").hasClass('active')){ 
       jQuery(".paged_links.productNavLinks .next").hide(); 
      }else{ 
       jQuery(".paged_links.productNavLinks .next").show(); 
      } 
     }); 
     jQuery(".paged_links.productNavLinks .prev").click(function(){ 
      jQuery(".paged_links.productNavLinks span.clickable.active").prev(".paged_links.productNavLinks span[class^='clickable']").click(); 
      var activeNav = jQuery("span.clickable.active").text(); 
      jQuery(".firstPageNumLink").text(activeNav); 
      if(jQuery(".clickable.firstPagerNav").hasClass('active')){ 
       jQuery(".paged_links.productNavLinks .prev").hide(); 
      }else{ 
       jQuery(".paged_links.productNavLinks .prev").show(); 
      } 
      if(jQuery(".clickable.lastPagerNav").hasClass('active')){ 
       jQuery(".paged_links.productNavLinks .next").hide(); 
      }else{ 
       jQuery(".paged_links.productNavLinks .next").show(); 
      } 
     }); 

     if(jQuery(".clickable.firstPagerNav").hasClass('active')){ 
      jQuery(".paged_links.productNavLinks .prev").hide(); 
     } 
     if(jQuery(".clickable.lastPagerNav").hasClass('active')){ 
      jQuery(".paged_links.productNavLinks .next").hide(); 
     } 

    });