長いリストをページに分割する（EJS-jQuery-AJAX）

Question

expressを使用してNode.jsでダッシュボードを作成していますが、時には非常に長いリストを生成することがあります。 20項目のページで、人々は前/次のページに行くためのボタンを持っていますが、リストからHTMLを置き換えるための理想的な方法がわからないので、前/次の20項目を表示します（ボタンを押します）。

私はBootstrap 3.3.7とjQuery 3.2.1を使用していますが、必要に応じてAJAXを使用することもできます（ローカルAPIエンドポイントからデータを要求しています）。またの場合はexpress 4.15.3、Node.jsはです。

私がリストを生成するために使用するデータは、オブジェクトの配列（JSON）です。解決策は、私が思ったより簡単だった

Answer 1

、私はその後、アイテムの「X」量でページを作成するjQuery.html()、jQuery.map()とArray.slice()を使用し、オブジェクトの配列をダウンロードして、アレイに割り当てます。両方のボタンのいずれかをクリックすると、ページが変更され、アレイを再スライスして前/次のページを表示します。

<div class="container"> 
    <div class="col-md-8 col-md-offset-2"> 
     <nav aria-label="guildPager"> 
      <ul class="pager"> 
       <li id="previousPage" class="previous"><span aria-hidden="true">&larr;</span></li> 
       <li id="nextPage" class="next"><span aria-hidden="true">&rarr;</span></li> 
      </ul> 
     </nav> 
     <div id="guildList"></div> 
    </div> 
</div> 

<script> 
    var arr = [{...}, {...}, ..., {...}]; 
    var page = 0; 
    var amount = 20; 
    var pages = Math.ceil(arr.length/amount); 

    function pagify() { 
     if (page === 0 && !$("#previousPage").hasClass("disabled")) $("#previousPage").addClass("disabled"); 
     else if ($("#previousPage").hasClass("disabled")) $("#previousPage").removeClass("disabled"); 

     if (page === pages - 1 && !$("#nextPage").hasClass("disabled")) $("#nextPage").addClass("disabled"); 
     else if ($("#nextPage").hasClass("disabled")) $("#nextPage").removeClass("disabled"); 

     $("#guildList").html($.map(arr.slice(page * amount, (page * amount) + amount), (a) => { 
      return `<h4>${a.name}<small> ${a.users} members.</small></h4><hr></hr><br />`; 
     })); 
    } 
    pagify(); 

    $("#nextPage").click(function() { 
     if ($(this).hasClass("disabled")) return; 
     page++; 
     pagify(); 
    }); 
    $("#previousPage").click(function() { 
     if ($(this).hasClass("disabled")) return; 
     page--; 
     pagify(); 
    }); 
</script>