使用数据表分页

百变鹏仔 3个月前 (09-20) #CSS

文章标签分页

我们可以使用分页技术以较小的块显示大量数据。例如，亚马逊和 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插件来为表格添加分页功能。我们还学会了设置自定义的页面长度。此外，我们还可以创建一个自定义输入字段来接收页面长度，并根据用户的偏好设置页面长度。

文章推荐

使用数据表分页

Syntax

语法

Example 1

示例 1

示例 2

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写