Bessere Möglichkeit, eine paginierte Liste von divs

Question

Problem zu erstellen: Ich muss eine Liste von "divs" erstellen, die Informationen über Hostels enthalten (Profilbild, einen Knopf, um ein Zimmer zu buchen und einige kurze Info). Diese Liste wird dynamisch durch eine Abfrage an eine Datenbank erstellt. Die Liste sollte paginiert werden und nur die ersten n Hostels anzeigen, indem Ajax-Aufrufe an die db gesendet werden.

Meine Lösung: Lassen Sie eine Vorlage div iterativ erstellt werden. Verwenden Sie Javascript, um die Paginierungsanforderung zu implementieren.

Meine Frage: Ist meine Erfindung der Radlösung sinnvoll? Oder besser, ich verwende eine vorhandene Bibliothek/einen vorhandenen Rahmen, um dies zu erreichen, wenn ja, irgendein Vorschlag bezüglich eines vorhandenen Werkzeugs geschätzt würde (es könnte off-topic sein, aber es ist nicht gelungen, eine einzige Bibliothek zu finden, um dies zu erreichen).

normal table with one column and three rows

table with one column but splitted rows

Answer 1

Es gibt viele Bibliotheken zur Verfügung, es zu erreichen, von denen ich verwendete

datatables.js

und funktioniert gut. Hat eine Option für Paging, Sortierung Suche usw.

Nur um eine Idee basierend auf Ihrem Design zu geben, können Sie eine einzelne Spalte Tabelle, die die Vorlage Ihrer div haben können (databates geben Option zum Definieren der Vorlage für Ihre Spalte) und Dann können Sie basierend auf einigen Ihrer Felddaten auch eine Sortierung definieren.

Paging es automatisch, aber Sie können es noch konfigurieren.

Es hat auch die Funktion der Suche, so können Sie die Option geben, nach bestimmten Herberge oder Preis oder irgendetwas zu suchen.