Eine lange Liste in Seiten brechen (EJS-jQuery-AJAX)

-1

Ich arbeite an einem Dashboard mit Node.js, mit express, aber manchmal erzeuge ich Listen, die extrem lang sind, und ich möchte sie in brechen Seiten mit 20 Elementen, Leute haben Knöpfe, um zur vorherigen/nächsten Seite zu gehen, aber ich weiß nicht, was der ideale Weg wäre, den HTML-Code von der Liste zu ersetzen, so dass er die 20 vorherigen/nächsten Einträge anzeigt (abhängig davon) Knopf drücken sie).Eine lange Liste in Seiten brechen (EJS-jQuery-AJAX)

Ich verwende Bootstrap 3.3.7 und jQuery 3.2.1, aber ich kann auch AJAX verwenden, wenn erforderlich (Daten von einem lokalen API-Endpunkt anfordern). Und express 4.15.3 für Node.js.

Die Daten, die ich verwende, um die Liste zu generieren, ist ein Array von Objekten (JSON).

Quelle

2017-07-17 Antonio Roman

Siehe hierzu. https://stackoverflow.com/questions/14035180/jquery-load-more-data-on-scroll – ThomasK

Wenn die Daten im Tabellenformat darstellbar sind, würde ich dataTables.net verwenden - es tut alles aus der Box mit Paginierungsoptionen –

@TomasK Das scheint nicht zu antworten, was ich tun möchte. Ich muss nur wissen, wie ich die Seitennummerierung durchführen kann (nicht unendlich scroll). –

Die Lösung war einfacher, als ich dachte, lade ich das Array von Objekten und weisen Sie auf ein Array, dann verwenden Sie jQuery.html(), jQuery.map() und Array.slice() die Seite mit ‚x‘ Menge der Objekte zu erstellen. Wenn Sie auf eine der beiden Schaltflächen klicken, wird die Seite geändert und das Array erneut geschnitten, um die vorherige/nächste Seite anzuzeigen.

<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>

Quelle

2017-07-17 15:08:59

Eine lange Liste in Seiten brechen (EJS-jQuery-AJAX)

Antwort

Verwandte Themen