iterate json array, split und dann in Sammlungen von 5 zu einer Zeit (Laravel, Ajax, Carbon)

Question

Als Neuling Entwickler hat mich eine Weile der Suche hoch und niedrig, bevor Sie sich entscheiden, um Hilfe zu posten, ich nicht ganz vollständig verstehe die richtigen Syntaxphrasen, nach denen ich suche, damit ich nicht die richtige Lösung finde.

In einer grundlegenden Erklärung: Im Laravel und Kohlenstoff mit Terminen ab sofort für die nächsten 60 Tage angezeigt werden, kehrt Kohlenstoff die Daten nur in Ordnung und Laravel gibt die Antwort in einem JSON-Format etwas wie folgt aus:

0: "Tuesday 10th May 2016 " 
    1: "Wednesday 11th May 2016" 
    2: "Thursday 12th May 2016" 

Und so weiter ... Also in meinem HTML habe ich ein Div, das 5 Ergebnisse enthält, aber ich muss in der Lage sein, etwas wie eine jQuery onclick -Funktion zu verwenden, um weitere Ergebnisse aus dem JSON-Array mit Spleiß zu laden.

Laravel hat die Paginierung Option, aber es funktioniert nicht auf Arrays und ich versuchte praktisch alles, was ich online finden kann, um eine Möglichkeit zu finden, das Array von 60 Tagen in Stücke von 5 zu teilen, so dass bei Verwendung einer OnLoad-Funktion der HTML wird mit den neuen 5 Ergebnissen ausgetrickst.

hier meine aktuelles Beiladen Funktion ist:

$.ajax({ 
    crossOrigin: true, 
    url: '/dates', 
    success: function(data) { 
     $(".newdates").html('').append(data); 
    } 
}); 

und ive auch versucht, die folgende, Das einzige Problem ist hier, dass ist lädt die gleichen 3 gespleißt Ergebnisse, wie ich eine Art von Paginierung Weise oder ähnlich muß, wie jquery DataTables funktioniert.

$.ajax({ 
    crossOrigin: true, 
    url: '/dates', 
    success: function(data) { 
     $.each(data.slice(0,3), function(i, item) { 
      console.log(item); 
     }); 
    } 
}); 

Mein erhofftes Ergebnis wäre!

in der HTML-Ansicht:

Day 1 
Day 2 
Day 3 
Day 4 
Day 5 

(Mehr laden) < - Onclick den aktuellen 5 verstecken und die nächsten 5 verfügbaren Termine zeigen.

First 5 days are now hidden from the view 
Day 6 
Day 7 
Day 8 
Day 9 
Day 10 

Und die gleiche Last Mehr Funktion agai

Hoffnung verfügbar sein wird, i seine eine Abhilfe, Vielen Dank für Ihre Zeit viel apprecaited, ich bin sicher, ich dort bekommen am Ende finden.

Answer 1

Wenn Sie nur auf der Clientseite paginieren möchten, können Sie diese Daten in einer Variablen speichern, damit Sie die Daten nicht erneut abrufen müssen. Außerdem können Sie eine Funktion zum Paginieren erstellen und sie bei Bedarf immer aufrufen. Sie sollten nach einem Plugin suchen, das sich bereits mit der Seitennummerierung beschäftigt (leider habe ich nicht nur die Seitennummerierung auf der Client-Seite verwendet, daher kenne ich kein aktuelles Plugin).

var myData = {}; 
 
var pageNumber = 1; 
 
var ITENS_PER_PAGE = 3; 
 

 
$.ajax({ 
 
    crossOrigin: true, 
 
    url: '/dates', 
 
    success: function(data) { 
 
     myData = data; 
 
     console.log(paginate(myData, pageNumber, ITENS_PER_PAGE)); 
 
    } 
 
}); 
 

 
function paginate(data, pageNumber, itensPerPage) { 
 
    return data.slice((pageNumber - 1) * itensPerPage, itensPerPage); 
 
} 
 

 
function loadMore() { 
 
    pageNumber++; 
 
    console.log(paginate(myData, pageNumber, ITENS_PER_PAGE)); 
 
}