我们可以使用分页技术以较小的块显示大量数据。例如，亚马逊和 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 个项目。
- .car-table { width: 500px; }
Using the Datatables to show pagination in the table.
$(document).ready(function () { var table = $('#car').DataTable({ "paging": true, "pageLength": 3 }); });
Model Year Country Brand Toyota Auris 2017 Japan Toyota Avensis 2016 Japan Honda Civic 2018 Japan Tata Nexon 2022 India Maruti Baleno 2019 India Maruti Swift 2017 India Hyundai Verna 2018 South Korea
登录后复制
示例 2
在下面的示例中，我们创建了一个表来存储与食物相关的数据。在这里，我们创建了一个包含食物信息的对象数组，例如食物名称、卡路里、脂肪、碳水化合物等。
之后，我们遍历数组，为数组的每个对象创建一个表格行，并将其附加到表格主体。此外，我们在不为food表格传递任何参数的情况下执行了dataTables()方法。
在输出中，用户可以观察到默认情况下每页显示 10 个值。不过，用户可以将其更改为 50 和 100。
- .food-table { width: 500px;}
Using the Datatables to show pagination in the table.
// 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 = ` ${food.name} ${food.calories} ${food.fat} ${food.carbs} ` table.appendChild(row) }) $(document).ready(function () { var table = $('#food').DataTable(); });
Food Calories Fat Carbs 登录后复制
我们学会了使用jQuery的DataTable插件来为表格添加分页功能。我们还学会了设置自定义的页面长度。此外，我们还可以创建一个自定义输入字段来接收页面长度，并根据用户的偏好设置页面长度。
以上就是使用数据表分页的详细内容，更多请关注【创想鸟】其它相关文章！
