ページネーションの制限を追加する

Question

私はJavaScriptで初心者です。私は自分のスキルを向上させるためにいくつかのスクリプトを構築しています。

純粋なJavaScriptでページネーションスクリプトを作成しようとしていますが、スクリプトは機能していますが、ページングの上限に達したときにフォワードリンクをブロックしたいと思います。私はすでにこのような状況を防ぐための条件を作成しようとしましたが、動作していません。

マイコード：

var col = document.getElementsByClassName('square'); 

    //Limit of squares to be shown 

    var begin = 0; 
    var end = 3; 

    //Show the first three squares 

    changePage("forward", 0, 0); 
    changePage("back", 0, 0); 

    function removeCols() { 
     for (var i = 0; i < col.length; i++) { 
     col[i].style = "display:none"; 
     } 
    } 

    //Forward and previous links 

    document.getElementsByClassName('forward')[0].onclick = function() { 
     changePage("forward", (col.length - 3), col.length); 
    }; 
    document.getElementsByClassName('previous')[0].onclick = function() { 
     changePage("previous", 0, 3); 
    }; 

    //Function to change the pagination page 

    function changePage(move, valueBegin, valueEnd) { 

     //This if statement checks if the user reached the pagination limit 

     if (document.getElementById('page').value == "" + valueBegin + valueEnd) { 
     return false; 
     } else { 
     removeCols(); 
     if (move == "forward") { 
      var forwardBegin = begin += 3; 
      var forwardEnd = end += 3; 
      moveIt(forwardBegin, forwardEnd); 
      document.getElementById('page').value = "" + forwardBegin + forwardEnd; 
     } else { 
      var previousBegin = begin -= 3; 
      var previousEnd = end -= 3; 
      moveIt(previousBegin, previousEnd); 
      document.getElementById('page').value = "" + previousBegin + previousEnd; 
     } 
     } 
    } 

    //Change page 

    function moveIt(begin, end) { 
     for (var i = begin; i < end; ++i) { 
     var item = col[i]; 
     if (item) { 
      item.style = "display:inline-block"; 
     } 
     } 
    } 

Jsfiddle：

https://jsfiddle.net/eyqv5j9w/2/

Answer 1

@Sergは、現在のページを格納する方法によってページングが正しく行われないという点で正しいです。

私はあなたの例を非常に単純化しました。あなたが最初/最後のページにいるとき、それは前/フォワードリンクを隠すようにしました。私はまた、ページごとに表示する四角形の数をそれ自身の変数に入れて、変更するのは簡単です。ここで

https://jsfiddle.net/2nzvyLvw/3/

私は変更の主要な部分です：

var col = document.getElementsByClassName('square'); 
    var forward = document.getElementsByClassName('forward')[0]; 
    var previous = document.getElementsByClassName('previous')[0]; 
    var page = 0; 
    var squaresPerPage = 3; 

    //Show the first page 
    changePage(0, squaresPerPage); 

    forward.onclick = function() { 
    page++; 
    var startingSquare = page * squaresPerPage; 
    changePage(startingSquare, startingSquare + squaresPerPage); 
    }; 
    previous.onclick = function() { 
    page--; 
    var startingSquare = page * squaresPerPage; 
    changePage(startingSquare, startingSquare + squaresPerPage); 
    }; 

    function changePage(valueBegin, valueEnd) { 
    removeCols(); 
    moveIt(valueBegin, valueEnd); 

    // hide forward link if on last page 
    if (valueEnd >= col.length) { 
     forward.style = "display: none"; 
    } else { 
     forward.style = "display: inline"; 
    } 
    // hide previous link if on first page 
    if (valueBegin <= 0) { 
     previous.style = "display: none"; 
    } else { 
     previous.style = "display: inline"; 
    } 
    } 

Answer 2

あなたが実際にページ変更を行う直前に、カウンターを追加し、ページのな長さに対してチェックする必要があります。何かのように：

if (counter < page_limit) { 
    counter ++; 
    changePage("forward", (col.length - 3), col.length); 
} 

全体stuffがこのJSFiddleである： https://jsfiddle.net/eyqv5j9w/5/

Answer 3

何よりもまず、ここでは多くの問題、あなたは現在のページを保存している方法があります。あなたがjsの変数とは対照的に、隠されたhtmlの入力にそれを保持している理由はありますか？あなたが隠し要素の値に割り当て

第二に、：

document.getElementById('page').value = "" + forwardBegin + forwardEnd; 

それは3ページ目でこのような何かされて終わる：

<input type="hidden" value="912" id="page"> 

しかし、我々はそれを修正しても、 "" +

にあなたのページの計算を変更する

document.getElementById('page').value = forwardBegin + forwardEnd; 

を取り除くことにより、文字列の連結では、ページの値が3から9に15で終わることになります。ページは6ではなく1だけインクリメントされます。

計算を再作成します。ページが1ずつインクリメントされていることを確認してから、表示するアイテムを計算してpage_number * items_to_showとします。すなわち、ページ3は項目6〜9を示す。