Heim >Web-Frontend >CSS-Tutorial >Verwenden der Paginierung von Datentabellen
Verwenden der Paginierung von Datentabellen
- WBOYnach vorne
- 2023-08-27 16:21:061250Durchsuche
Mit der Paging-Technologie können wir große Datenmengen in kleineren Blöcken anzeigen. Online-Shops wie Amazon und Flipkart listen beispielsweise Millionen von Produkten auf. Wenn sie also keine Paginierungstechnologie zur Anzeige der Daten verwenden, müsste der Benutzer zum Ende der Webseite scrollen, um das letzte Produkt zu sehen. Überlegen Sie nun, wie lange Sie scrollen müssen, um unter Millionen von Produkten zum letzten Produkt zu gelangen.
Bei der Paginierungstechnologie zeigen wir eine bestimmte Datenmenge auf einer einzelnen Seite an. Wenn wir beispielsweise die Länge jeder Seite auf 100 festlegen, kann der Benutzer die ersten 100 Produkte auf der ersten Seite sehen, weitere 100 Produkte auf der zweiten Seite und so weiter.
In jQuery wird das Datatables-Plugin zum Formatieren von HTML-Tabellendaten verwendet. Darüber hinaus ermöglicht es das Hinzufügen von Paginierungsfunktionen zu Tabellen.
Die chinesische Übersetzung vonSyntax
lautet:Grammatik
Benutzer können die Datatables-API verwenden, um Tabellen mithilfe der folgenden Syntax eine Paginierung hinzuzufügen.
$('selector').DataTable({
"paging": boolean,
"pageLength": number
});
In der obigen Syntax kann der Benutzer den booleschen Wert „wahr“ oder „falsch“ verwenden, um die Paginierung anzuzeigen oder auszublenden. Die Eigenschaft pageLength gibt die Gesamtzahl der auf einer einzelnen Seite angezeigten Einträge an.
Die chinesische Übersetzung vonBeispiel 1
lautet:Beispiel 1
Im folgenden Beispiel erstellen wir eine Tabelle mit Kartendaten. Zusätzlich haben wir eine „id“ mit dem Wert „car“ hinzugefügt.
In jQuery greifen wir über ihre ID auf die Tabelle zu und führen die Funktion DataTable() aus. Zusätzlich übergeben wir dieses Objekt als Argument an die Methode datatable(). Dieses Objekt enthält „paging: true“ und „pageLength: 3“, um das Paging festzulegen und 3 Elemente pro Seite anzuzeigen.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
<link rel = "stylesheet" href = "https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<script src = "https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"> </script>
<style>
.car-table {
width: 500px;
}
</style>
</head>
<body>
<h2>Using the <i> Datatables to show pagination </i> in the table.</h2>
<div class = "car-table">
<table id = "car">
<thead>
<tr>
<th> Model </th>
<th> Year </th>
<th> Country </th>
<th> Brand </th>
</tr>
</thead>
<tbody>
<tr>
<td> Toyota </td>
<td> Auris </td>
<td> 2017 </td>
<td> Japan </td>
</tr>
<tr>
<td> Toyota </td>
<td> Avensis </td>
<td> 2016 </td>
<td> Japan </td>
</tr>
<tr>
<td> Honda </td>
<td> Civic </td>
<td> 2018 </td>
<td> Japan </td>
</tr>
<tr>
<td> Tata </td>
<td> Nexon </td>
<td> 2022 </td>
<td> India </td>
</tr>
<tr>
<td> Maruti </td>
<td> Baleno </td>
<td> 2019 </td>
<td> India </td>
</tr>
<tr>
<td> Maruti </td>
<td> Swift </td>
<td> 2017 </td>
<td> India </td>
</tr>
<tr>
<td> Hyundai </td>
<td> Verna </td>
<td> 2018 </td>
<td> South Korea </td>
</tr>
</tbody>
</table>
</div>
<div id="paginationContainer"></div>
<script>
$(document).ready(function () {
var table = $('#car').DataTable({
"paging": true,
"pageLength": 3
});
});
</script>
</body>
</html>
Beispiel 2
Im folgenden Beispiel haben wir eine Tabelle zum Speichern lebensmittelbezogener Daten erstellt. Hier erstellen wir eine Reihe von Objekten mit Lebensmittelinformationen wie Lebensmittelname, Kalorien, Fett, Kohlenhydrate usw.
Danach durchlaufen wir das Array, erstellen eine Tabellenzeile für jedes Objekt des Arrays und hängen sie an den Tabellenkörper an. Darüber hinaus haben wir die Methode dataTables() ausgeführt, ohne Parameter für die Lebensmitteltabelle zu übergeben.
In der Ausgabe kann der Benutzer beobachten, dass standardmäßig 10 Werte pro Seite angezeigt werden. Der Benutzer kann ihn jedoch auf 50 und 100 ändern.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
<link rel = "stylesheet" href = "https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<script src = "https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"> </script>
<style>
.food-table { width: 500px;}
</style>
</head>
<body>
<h2>Using the <i> Datatables to show pagination </i> in the table.</h2>
<div class = "food-table">
<table id = "food">
<thead>
<tr>
<th> Food </th>
<th> Calories </th>
<th> Fat </th>
<th> Carbs </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="paginationContainer"></div>
<script>
// create array of above table
const foods = [
{ name: "Bread", calories: 100, fat: 10, carbs: 20 },
{ name: "Butter", calories: 50, fat: 5, carbs: 10 },
{ name: "Avocado", calories: 500, fat: 50, carbs: 60 },
{ name: "Apple", calories: 600, fat: 60, carbs: 70 },
{ name: "Orange", calories: 700, fat: 70, carbs: 80 },
{ name: "Watermelon", calories: 800, fat: 80, carbs: 90 },
{ name: "Strawberry", calories: 900, fat: 90, carbs: 100 },
{ name: "Blueberry", calories: 1000, fat: 100, carbs: 110 },
{ name: "Raspberry", calories: 1200, fat: 120, carbs: 130 },
{ name: "Cherry", calories: 1300, fat: 130, carbs: 140 },
{ name: "Plum", calories: 1400, fat: 140, carbs: 150 },
{ name: "Peach", calories: 1500, fat: 150, carbs: 160 },
{ name: "Pear", calories: 1600, fat: 160, carbs: 170 },
{ name: "Grapes", calories: 1700, fat: 170, carbs: 180 },
{ name: "Banana", calories: 1800, fat: 180, carbs: 190 },
{ name: "Pineapple", calories: 1900, fat: 190, carbs: 200 },
{ name: "Mango", calories: 2000, fat: 200, carbs: 210 },
{ name: "Papaya", calories: 2100, fat: 210, carbs: 220 },
{ name: "Kiwi", calories: 2200, fat: 220, carbs: 230 },
{ name: "Grapefruit", calories: 2300, fat: 230, carbs: 240 },
{ name: "Lemon", calories: 2400, fat: 240, carbs: 250 },
{ name: "Lime", calories: 2500, fat: 250, carbs: 260 },
]
// accessing the table and adding data
const table = document.querySelector('#food tbody')
foods.forEach(food => {
const row = document.createElement('tr')
row.innerHTML = `
<td> ${food.name} </td>
<td> ${food.calories} </td>
<td> ${food.fat} </td>
<td> ${food.carbs} </td>
`
table.appendChild(row)
})
$(document).ready(function () {
var table = $('#food').DataTable();
});
</script>
</body>
</html>
Wir haben gelernt, das DataTable-Plug-in von jQuery zu verwenden, um der Tabelle Paginierungsfunktionen hinzuzufügen. Wir haben auch gelernt, eine benutzerdefinierte Seitenlänge festzulegen. Darüber hinaus können wir ein benutzerdefiniertes Eingabefeld erstellen, um die Seitenlänge zu empfangen und die Seitenlänge entsprechend den Vorlieben des Benutzers festzulegen.
Das obige ist der detaillierte Inhalt vonVerwenden der Paginierung von Datentabellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!