資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究使用 Datatables 進行分頁
我們可以使用分頁技術將大量資料分成較小的塊顯示。例如，像亞馬遜和 Flipkart 這樣的線上商店列出了數百萬種產品。因此，如果他們不使用分頁技術來顯示資料，使用者需要滾動到網頁末尾才能檢視最後的產品。現在，想象一下，要檢視數百萬種產品中的最後一款產品需要滾動多少次。
在分頁技術中，我們在單個頁面上顯示特定數量的資料。例如，如果我們將頁面長度設定為 100，使用者可以在第一頁上看到前 100 個產品，在第二頁上看到另外 100 個產品，依此類推。
在 jQuery 中，Datatables 外掛用於格式化 HTML 表格資料。此外，它允許在表格中新增分頁功能。
語法
使用者可以按照以下語法使用 Datatables API 向表格新增分頁功能。
$('selector').DataTable({
"paging": boolean,
"pageLength": number
});
在以上語法中，使用者可以使用“true”或“false”布林值來顯示或隱藏分頁。pageLength 屬性指定在單個頁面上顯示的條目總數。
示例 1
在下面的示例中，我們建立了汽車資料的表格。此外，我們使用“car”值添加了“id”。
在 jQuery 中，我們使用其 id 訪問了表格並執行了 DataTable() 函式。此外，我們將物件作為 datatable() 方法的引數傳遞。該物件包含“paging: true”以設定分頁和“pageLength: 3”，每頁顯示 3 個專案。
<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>
示例 2
在下面的示例中，我們建立了一個表格來儲存與食物相關的資料。在這裡，我們建立了一個物件陣列，其中包含食物資訊，例如食物名稱、卡路里、脂肪、碳水化合物等。
之後，我們遍歷陣列，為陣列的每個物件建立一個表格行，並將其追加到表格主體。此外，我們執行了 dataTables() 方法，而沒有為食物表格傳遞任何引數。
在輸出中，使用者可以觀察到它預設情況下每頁顯示 10 個值。但是，使用者可以將其更改為 50 和 100。
<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>
我們學習瞭如何使用 jQuery 的 DataTable 外掛向表格新增分頁功能。我們還學習瞭如何設定自定義頁面長度。此外，我們可以建立一個自定義輸入欄位來獲取頁面長度並根據使用者的偏好設定頁面長度。
更新於：2023 年 5 月 5 日
7K+ 次瀏覽
廣告