Reagieren Sie die Tabellen-Paginierung (serverseitig) mit Suchen | Reaktionstabelle v7 - BezKoder

Blog

In diesem Tutorial zeige ich Ihnen, wie Sie die React Table Pagination (serverseitig) mit der Suche in einer React Hooks-Anwendung unter Verwendung von React-Table v7 für die Datentabelle und Material-UI für die Paginierung durchführen.

Kompletter Artikel: https://bezkoder.com/react-table-pagination-server-side/

React Table Pagination (Serverseite) mit Suchbeispiel

Eines der wichtigsten Dinge, um eine Website benutzerfreundlich zu gestalten, ist die Reaktionszeit, und aus diesem Grund kommt die Paginierung. Auf dieser bezkoder.com-Website gibt es beispielsweise Hunderte von Tutorials, und wir möchten nicht alle auf einmal sehen. Paging bedeutet, eine kleine Anzahl von allen auf einer Seite anzuzeigen.

Angenommen, wir haben eine Tutorial-Tabelle in der Datenbank wie folgt:

Alt-Text

Unsere React.js-App zeigt das Ergebnis mit React-Table-Paginierung (serverseitig) an:

Alt-Text

Wechseln Sie zu einer Seite mit größerem Index:

Alt-Text

Wir können die Anzahl der Artikel pro Seite (Seitengröße) ändern:

Alt-Text

Oder Tabellen-Paginierung mit Suche:

Alt-Text

Die API für diesen React-Client finden Sie in einem der folgenden Beiträge:

Diese Server exportieren API für die Paginierung (mit/ohne Filter), hier sind einige URL-Beispiele:

  • /api/tutorials?page=1&size=5
  • |_+_|: Standardwert für Seite verwenden
  • |_+_|: Standardwert für Größe verwenden
  • |_+_|: Paginierung & Filtern nach Titel mit 'Daten'

Dies ist die Struktur der Antwort für die HTTP-GET-Anfrage:

/api/tutorials?size=5

Wir brauchen eigentlich nur |_+_| und |_+_| beim Arbeiten mit Material-UI.

Für Schritt-für-Schritt- und Github-Quellcode besuchen Sie bitte:
https://bezkoder.com/react-table-pagination-server-side/

Zusammenhängende Posts:

Serverlos mit Firebase:

#reagieren #javascript #web-entwicklung #programmierung #pagination #node

bezkoder.com

Reagieren Sie die Tabellen-Paginierung (serverseitig) mit Suchen | Reaktionstabelle v7 - BezKoder

Erstellen Sie React Table Pagination (Serverseite) mit Search using React-Table v7 - React Material Table Pagination Beispiel mit Rest API-Aufruf