使用資料表分頁-css教學-PHP中文網

使用資料表分頁

我們可以使用分頁技術以較小的區塊顯示大量資料。例如，亞馬遜和 Flipkart 等線上商店列出了數百萬種產品。因此，如果他們不使用分頁技術來顯示數據，用戶需要滾動網頁末尾才能查看最後一個產品。現在，想想需要多少滾動才能到達數百萬種產品中的最後一個產品。

在分頁技術中，我們在單一頁面上顯示特定數量的資料。例如，如果我們將每頁長度設為100，用戶可以在第一頁看到前100個產品，在第二頁看到另外100個產品，以此類推。

在jQuery中，Datatables外掛程式用於格式化HTML表格資料。此外，它還允許在表格中新增分頁功能。

Syntax

的中文翻譯為：

文法

使用者可以依照以下語法使用 Datatables API 為表格新增分頁。

$('selector').DataTable({
   "paging": boolean,
   "pageLength": number
});

登入後複製

在上述語法中，使用者可以使用「true」或「false」布林值來顯示或隱藏分頁。 pageLength 屬性指定單一頁面上顯示的條目總數。

Example 1

的中文翻譯為：

範例 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

在下面的範例中，我們建立了一個表格來儲存與食物相關的資料。在這裡，我們創建了一個包含食物資訊的物件數組，例如食物名稱、卡路里、脂肪、碳水化合物等。

之後，我們遍歷數組，為數組的每個物件建立一個表格行，並將其附加到表格主體。此外，我們在不為food表格傳遞任何參數的情況下執行了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外掛來為表格新增分頁功能。我們也學會了設定自訂的頁面長度。此外，我們還可以建立一個自訂輸入欄位來接收頁面長度，並根據使用者的偏好設定頁面長度。

以上是使用資料表分頁的詳細內容。更多資訊請關注PHP中文網其他相關文章！