Implementierung des React Page Turner (inkl. Front- und Backend)

Frontend

Zunächst müssen Sie mit der Attributpaginierung in der Tabelle im Front-End-React vertraut sein

<Paginierung bei Änderung = {bei Änderung} insgesamt = {50} />

<Tabelle mit Rahmen columns={columns} rowKey={record => record.id} dataSource={dataSource}
       pagination={pagination}/>

Unter ihnen ist die Paginierung eine Funktion, die wir selbst implementieren. Da in React nur statische Beispiele angegeben sind, können wir die React-Dokumentation überprüfen. Das angegebene Beispiel lautet wie folgt

Es erinnert uns daran, dass die Funktionsparameter current und pageSize sind
Dann können wir den Anweisungen im Dokument folgen, um darüber nachzudenken, ob wir die aktuelle Seite und die maximale Datenmenge pro Seite an die Funktion übergeben können

Entwerfen und schreiben Sie die Pageturner-Funktion gemäß den oben genannten Ideen

const pagination = {
    zeigeQuickJumper:true,
    Größe ändern:[],
    gesamt: dieses.beispiel.gesamt,
    defaultCurrent: diese.Beispielseite,
    aktuell: diese.Beispielseite,
    Seitengröße: dieses.Beispiel.Seitengröße,
    hatNächsteSeite: dieses.Beispiel.hasNächsteSeite,
    onShowSizeChange: (aktuell, Größe) => {
         // Maximale Datenmenge pro Seite self.example.pageSize = size;
        //Aktuelle Seite self.example.page = current;
        // Kapsele zwei Parameter in einem Tempel ein let temple = {
            Seite: selbst.Beispiel.Seite,
            Seitengröße: selbst.Beispiel.Seitengröße
        };
        // Abschließend die Funktion erneut anfordern und die aktuelle Seite und die maximale Datenmenge für jede Seite an die Parameter für die erneute Anforderung übergeben self.onFetch(temple);
    },
    beiÄnderung(aktuell, Seitengröße) {
        self.example.pageSize = Seitengröße;
        selbst.beispiel.seite = aktuell;
        
        lass Tempel = {
            Seite: self.data.search.page,
            Seitengröße: self.data.search.pageSize,
        };
        self.onFetch(Tempel);
    }
};

An diesem Punkt haben wir die Front-End-Funktion des Pagers implementiert, sodass wir die Paginierung an die Paginierung in der Tabelle übergeben können

Backend (am Beispiel von Java)

Zuerst müssen wir ein SQL schreiben

Wähle die ID aus dem STU-Limit ${(page - 1)*(pageSize)}, ${pageSize + 1}

Bei der Interpretation von SQL fragen sich manche vielleicht, warum pageSize um 1 erhöht wird
Denn zum Beispiel

countSize ist 201 pageSize ist 20 Sie dividieren direkt das Ergebnis ist 10, aber eigentlich brauchen Sie 11

Wir können mybatis-helper verwenden oder PageList selbst im Backend kapseln
Schließlich können die aus der Datenbank abgerufenen Daten in PageList eingefügt und dann an das Frontend zurückgegeben werden. Das Frontend erhält die Gesamtanzahl der Daten (total) und die maximale Anzahl der Seiten (pageSize), die vom Backend übergeben wurden.

Zum Thema SQL-Parameterübergabe

Wenn wir schreiben

WÄHLEN
 Ausweis
AUS
 Stu
GRENZE 1,10

Die gefundenen Daten sind 218 222 220 217 219 221 8 9 10 12
Wenn wir 1 in 2 ändern, erhalten wir die Daten 222 220 217 219 221 8 9 10 12 14
Aus diesem Grund schreiben wir in SQL (Seite - 1)*(Seitengröße)
Denn wenn das Limit als 10, 10 übergeben wird, können die Daten aktualisiert werden. Andernfalls aktualisieren wir, wenn das Front-End page=2 übergibt, nur ein Datenelement im Back-End und überlappen die Daten entsprechend pageSize-1.

Beachten

Wenn wir SQL als (Seite-1) schreiben, muss der Standardseitenwert des Front-Ends bei 1 beginnen. Andernfalls wird, wenn 0 übergeben wird, eine negative Zahl angezeigt und unser Back-End generiert einen Fehler.

Weitere Informationen zur Optimierung des Limits finden Sie in meinem anderen Artikel „Detaillierte Untersuchung der MySQL Select-Optimierung“.

Dies ist das Ende dieses Artikels über die Implementierung des React Page Turner (einschließlich Front-End und Back-End). Weitere relevante Inhalte zum React Page Turner finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!