修復分頁極限上的JavaScript

Question

首先，要清楚我是一個JavaScript和jQuery的新手。 現在，我正在使用JavaScript文件分頁內部的一個div。該腳本工作正常，但如果有大量的數據，那麼我需要限制與「下一個」和「前一個」標記分頁鏈接。我找不到辦法做到這一點。目前分頁腳本根據提供的數據顯示所有數字，如1 2 3 4 5 6 7 8 9等。但是，我想告訴他們喜歡，1 2 3 4 5 next>>或<<prev 2 3 4 5 6 next>>

這裏是我的pagination.js

var Imtech = {}; 
Imtech.Pager = function() { 
    this.paragraphsPerPage = 3; 
    this.currentPage = 1; 
    this.pagingControlsContainer = "#pagingControls"; 
    this.pagingContainerPath = "#content"; 

    this.numPages = function() { 
     var numPages = 0; 
     if (this.paragraphs != null && this.paragraphsPerPage != null) { 
      numPages = Math.ceil(this.paragraphs.length/this.paragraphsPerPage); 
     } 

     return numPages; 
    }; 

    this.showPage = function(page) { 
     this.currentPage = page; 
     var html = ""; 
     for (var i = (page-1)*this.paragraphsPerPage; i < ((page-1)*this.paragraphsPerPage) + this.paragraphsPerPage; i++) { 
      if (i < this.paragraphs.length) { 
       var elem = this.paragraphs.get(i); 
       html += "<" + elem.tagName + ">" + elem.innerHTML + "</" + elem.tagName + ">"; 
      } 
     } 

     $(this.pagingContainerPath).html(html); 

     renderControls(this.pagingControlsContainer, this.currentPage, this.numPages()); 
    } 

    var renderControls = function(container, currentPage, numPages) { 
     var pagingControls = "<b>Pages</b>: <ul>"; 
     for (var i = 1; i <= numPages; i++) { 
      if (i != currentPage) { 
       pagingControls += "<li><a href='#' onclick='pager.showPage(" + i + "); return false;'>" + i + "</a></li>"; 
      } else { 
       pagingControls += "<li>" + i + "</li>"; 
      } 
     } 

     pagingControls += "</ul>"; 

     $(container).html(pagingControls); 
    } 
} 

得到想要的樣子，我怎麼編輯這個腳本嗎？如果有人可以幫我一下吧， 請這樣做。

Answer 1

你可以改變renderControls這樣的：

var renderControls = function(container, currentPage, numPages, pagesCutoff) { 
    var pagingControls = "<b>Pages</b>: <ul>"; 
    var prevPosition = currentPage - pagesCutoff; 
    var nextPosition = currentPage + pagesCutoff; 

    for (var i = 1; i <= numPages; i++) { 
     if (i != currentPage) {     
      if(i >= prevPosition && i <= nextPosition) { 
       var linkToPage = i == prevPosition ? currentPage - 1 : i == nextPosition ? currentPage + 1 : i; 
       var linkText = i == prevPosition ? "<< prev" : i == nextPosition ? "next >>" : i; 

       pagingControls += "<li><a href='#' onclick='pager.showPage(" + linkToPage + "); return false;'>" + linkText + "</a></li>"; 
      } 
     } else { 
      pagingControls += "<li>" + i + "</li>"; 
     } 
    } 

    pagingControls += "</ul>"; 

    $(container).html(pagingControls); 
} 

這添加到Imtech.Pager：this.pageLinksEachSide = 3;

而且renderControls調用改成這樣：renderControls(this.pagingControlsContainer, this.currentPage, this.numPages(), this.pageLinksEachSide);

這是假設您想要的「下一個「鏈接導航到currentPage + 1和」prev「鏈接導航到currentPage - 1。