javascriptのページ区切り制限を修正しました

Question

まず、私はjavascriptとjqueryを持つ初心者です。 今、私はdiv内でページを設定するためにjavascriptファイルを使用しています。スクリプトはうまく動作しますが、データがたくさんある場合は、「次の」タグと「前の」タグを付けてページを設定するリンクを制限する必要があります。私はそれを行う方法を見つけることができません。現在、ページングスクリプトは、提供されたデータに応じて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); 
    } 
} 

で、どのように私は、このスクリプトを編集するには？誰がそれで私を助けることができる場合、 そうしてください。

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にこれを追加します：あなたはこのようrenderControlsを変更することができ

Answer 1

this.pageLinksEachSide = 3;

そして、これまでrenderControls呼び出しに変更：renderControls(this.pagingControlsContainer, this.currentPage, this.numPages(), this.pageLinksEachSide);

をこれは、「あなたが欲しいと仮定しています「次へ」リンクをクリックしてcurrentPage + 1に移動し、「prev」リンクをクリックしてcurrentPage - 1に移動します。