So verwenden Sie Lauis Paging

Layui ist eine sehr praktische Front-End-Entwicklungsbibliothek. Wir können damit einfach und unkompliziert verschiedene schöne Front-End-Benutzeroberflächen erstellen. Werfen wir einen kurzen Blick auf eine häufig verwendete Paging-Komponente und wie man Laui zur Vervollständigung verwendet. Nur ein paar Zeilen Code reichen aus.

Methode/Schritte

Zuerst müssen wir die Skriptdatei und die Stildatei für Lay einführen.

In HTML müssen wir nur ein leeres Div erstellen, um die Paging-Komponente zu generieren, und eine ID für dieses Div bereitstellen.

Im js-Skriptcode generieren wir zunächst ein Instanzobjekt der Laypage-Paging-Komponente.

Rufen Sie dann die Rendermethode dieses Objekts auf, um jedes Element der Paging-Seite zu rendern.

In der Render-Methode übergeben wir ein Objekt, elem ist die ID des Div.

count wird verwendet, um anzugeben, wie viele Daten sich im Paging-Objekt befinden.

Wenn wir diesen Code ausführen, können wir das gerenderte Paging sehen. Mit einem sehr einfachen Code erhalten wir ein schönes Paging.

Verwandte Empfehlungen: „Layui-Framework-Tutorial“

Aus den obigen Daten können wir ersehen, dass es standardmäßig eine Seite enthält 10 Daten.

Natürlich können wir dies auch konfigurieren, geben Sie einfach den Grenzwertparameter an, wir setzen ihn hier auf 4.

Aktualisieren Sie die Seite und Sie können sehen, dass es 20 Datenelemente und 4 Datenzeilen pro Seite gibt. Sie können sehen, dass sie jetzt in 5 Seiten unterteilt ist.

Bei der Seitensteuerung ist eine sehr wichtige Funktion die Notwendigkeit der Interaktion, d.h. nach einem Klick auf eine bestimmte Seite müssen die Daten der entsprechenden Seite angezeigt werden .

Daher stellt die Komponente eine Sprungmethode für die Interaktion bereit. In dieser Methode wird ein Parameter obj übergeben. Von diesem obj können wir einige häufig verwendete Daten abrufen, z. B. obj.cur, das den aktuellen Wert abruft Seitenzahl.

obj.limit kann die Anzahl der auf jeder Seite enthaltenen Daten abrufen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Lauis Paging. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!