Verwendung von JavaScript zur Implementierung der Paging-Anzeige von Tabellendaten

Da die Datenmenge weiter wächst, wird die Tabellendarstellung schwieriger. Meistens ist die Datenmenge in einer Tabelle so groß, dass das Laden langsamer wird und Benutzer die Seite ständig durchsuchen müssen, um die gewünschten Daten zu finden. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript eine paginierte Anzeige von Tabellendaten realisieren und Benutzern das Auffinden der gewünschten Daten erleichtern.

1. Tabellen dynamisch erstellen

Um die Paging-Funktion besser kontrollierbar zu machen, ist es notwendig, Tabellen dynamisch zu erstellen. Fügen Sie auf der HTML-Seite ein Tabellenelement hinzu, das dem folgenden ähnelt.

Nummer	Name	Alter	Geschlecht
1	小红	20	Weiblich
2	Xiao Ming	22	Männlich
3	Kleine Blume	25	Weiblich

In JavaScript definieren Sie zunächst ein Array mit allen Tabellendaten:

let tableData = [
{ id: 1, name: '小红', age: 20, gender: 'female' },
{ id: 2 , name : 'Xiao Ming', Alter: 22, Geschlecht: 'Männlich' },
{ ID: 3, Name: '小花', Alter: 25, Geschlecht: 'Weiblich' },
// Weitere Daten
]; Als nächstes erstellen Sie eine Funktion namens „createTable“. Diese Funktion erstellt ein leeres Tabellenelement und fügt es in die HTML-Seite ein.

// Tabelle erstellen

function createTable() {

let table = document.createElement('table'); // Tabellenelement erstellen
table.id = 'table-page'; // Setze die ID
table.classList. add('table'); // Stil hinzufügen
let thead = document.createElement('thead');
let tr = document.createElement('tr');
let thNum = document.createElement('th');
thNum.innerHTML = 'Number';
tr.appendChild(thNum);
let thName = document.createElement('th');
thName.innerHTML = 'Name';
tr.appendChild(thName);
let thAge = document.createElement('th');
thAge.innerHTML = 'Age';
tr.appendChild(thAge);
let thGender = document.createElement('th');
thGender.innerHTML = 'Gender';
tr.appendChild(thGender);
thead.appendChild(tr);
table.appendChild(thead);
let tbody = document.createElement('tbody');
table.appendChild(tbody);
document.body.appendChild (table);
}

Rufen Sie nun die Funktion createTable auf, um die Tabelle zu erstellen.

createTable();

2. Paginierung hinzufügen

Erstellen Sie in JavaScript eine neue Funktion mit dem Namen „Paginierung“. Diese Funktion filtert die Tabellendaten basierend auf der erforderlichen Datenmenge pro Seite und der aktuellen Seitennummer und zeigt sie an die Ergebnisse im Formular.

// Paginierungsfunktion

function pagination(pageSize, pageNumber) {

let table = document.getElementById('table-page');
let tbody = table.querySelector('tbody');
let start = pageSize * ( pageNumber - 1);
let end = start + pageSize;
let d = tableData.slice(start, end);
tbody.innerHTML = '';
for (let i = 0; i < d.length; i++ ) {

let tr = document.createElement('tr');
for (let key in d[i]) {
  let td = document.createElement('td');
  td.innerHTML = d[i][key];
  tr.appendChild(td);
}
tbody.appendChild(tr);

}

}

In dieser Funktion werden zuerst das Tabellenelement und das Tbody-Element abgerufen. Anschließend wird der anzuzeigende Datenbereich anhand der angegebenen Datenmenge pro Seite und der aktuellen Seitenzahl berechnet. Verwenden Sie dann die Slice-Methode, um die auf der aktuellen Seite anzuzeigenden Daten abzurufen, und fügen Sie sie in einer Schleife zum tbody-Element der Tabelle hinzu.

3. Erstellen Sie die Paging-Komponente

Als nächstes erstellen Sie eine Funktion namens „createPagination“, um die Paging-Komponente zu generieren.

//Paginierungsschaltflächenkomponente erstellen

function createPagination(pageSize) {

let totalPage = Math.ceil(tableData.length / pageSize);
let pagination = document.getElementById('pagination');
if (!pagination) {

pagination = document.createElement('div');
pagination.id = 'pagination';
document.body.appendChild(pagination);

}

pagination.innerHTML = '';

for (let i = 1; i <= totalPage; i++) {

let btn = document.createElement('button');
btn.innerHTML = i;
btn.onclick = function() {
  pagination(pageSize, i)
};
pagination.appendChild(btn); 

}

}

Diese Funktion zählt die Anzahl aller Seiten, basierend auf jeder Schaltflächenkomponente zur Mengengenerierung auf der Seite. Innerhalb der Schleife wird jede Schaltfläche erstellt und an das Element „Paginierung“ angehängt. Legen Sie abschließend das Klickereignis der Schaltfläche fest, um die Paginierungsfunktion „pagination()“ aufzurufen.

4. Auf tatsächliche Projekte anwenden

In tatsächlichen Projekten können Sie das tableData-Array durch vom Server erhaltene Daten ersetzen und die Tabellenerstellungs- und Paging-Funktionen nach Bedarf aufrufen.

// Daten asynchron anfordern

let xhr = new XMLHttpRequest();

xhr.open('GET', '/getData');
xhr.onload = function() {
let data = JSON.parse(xhr. ResponseText);
tableData = data;
createTable();
pagination(pageSize, pageNumber);
createPagination(pageSize);
}
xhr.send();

In diesem Beispiel wird ein XMLHttpRequest-Objekt verwendet, um Daten abzurufen asynchron. Anschließend werden die Daten in ein JSON-Objekt geparst und die Funktionen createTable, pagination und createPagination aufgerufen.

5. Zusammenfassung

Durch die oben genannten Schritte haben wir JavaScript erfolgreich verwendet, um die Grundfunktion der Anzeige von Tabellendaten auf Seiten zu implementieren. Wenn die Datenmenge groß ist, verbessert diese Methode die Leistung der Tabelle erheblich und bietet Benutzern auch ein besseres interaktives Erlebnis. Schließlich liegt der Reiz einer Software in der bequemen und einfachen Benutzererfahrung.

Das obige ist der detaillierte Inhalt vonVerwendung von JavaScript zur Implementierung der Paging-Anzeige von Tabellendaten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!