<script>
$(document).ready(function() {
$('#my-table').DataTable({
"pageLength": 50
});
});
</script>-------------------------------------------------------------------------------------
"paging": false, // 禁用分页
"info": false, // 禁用显示数据总数信息
"searching": false, // 禁用搜索
"lengthChange": false, // 禁用更改每页显示数据数量
"ordering": false, // 禁用排序
"scrollY": "500px", // 设置DataTable的高度
"scrollCollapse": true, // 当显示的数据不足以填满分配的高度时，启用滚动条
"scrollX": true // 启用水平滚动条
jquery DataTable 是一个非常强大的 JavaScript 表格插件，它可以帮助我们快速地在网页中创建、操作和展示数据表格。在使用 DataTable 进行数据展示的过程中，我们经常会需要设置每页显示的条数。本文将介绍如何使用 DataTable 设置默认的每页显示条数，并提供相关的代码示例。
什么是 DataTable？
DataTable 是一个基于 jQuery 的插件，它提供了丰富的 API，可以帮助我们创建交互性强、功能丰富的数据表格。DataTable 支持数据的排序、搜索、分页等功能，可以自适应不同的设备和屏幕尺寸。
DataTable 是一个开源项目，它的代码托管在 GitHub 上，可以通过在项目的 GitHub 页面上下载最新版本的 DataTable。
DataTable 的基本用法
在使用 DataTable 之前，我们需要引入 jQuery 和 DataTable 的相关文件。可以在项目中使用 npm 或者直接从 DataTable 官方网站下载并引入相关的文件。以下是一个基本的 DataTable 的用法示例：
首先，在 HTML 文件中引入必要的 CSS 和 JS 文件：
<link rel="stylesheet" type="text/css" href="<script src="<script src="
然后，在 HTML 文件中创建一个表格，并给表格添加一个 ID：
<table id="myTable"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Country</th> </tr> </thead> <tbody> <tr> <td>John Doe</td> <td>25</td> <td>USA</td> </tr> <tr> <td>Jane Smith</td> <td>30</td> <td>UK</td> </tr> <!-- more rows... --> </tbody></table>
接下来，在 JavaScript 代码中初始化 DataTable：
$(document).ready(function() { $('#myTable').DataTable();});
上述代码中，$(document).ready() 函数确保在页面加载完成后执行初始化 DataTable 的操作。$('#myTable').DataTable() 将会把表格 #myTable 转换成 DataTable。
至此，基本的 DataTable 就已经完成了。我们可以在页面上看到一个带有排序、搜索和分页功能的数据表格。
DataTable 的默认每页显示条数
默认情况下，DataTable 会将数据分页显示，每页显示 10 条数据。如果我们需要设置每页显示的条数，可以通过 pageLength 选项来实现。
以下是一个设置默认每页显示 25 条数据的示例：
$(document).ready(function() { $('#myTable').DataTable({ "pageLength": 25 });});
在上述代码中，我们通过在 DataTable 初始化的时候传入一个配置对象来设置 pageLength 选项。这样，DataTable 将会默认每页显示 25 条数据。
如果我们想要设置不同的每页显示条数选项，可以使用 lengthMenu 选项。以下是一个设置每页显示 10、25、50 条数据的示例：
$(document).ready(function() { $('#myTable').DataTable({ "lengthMenu": [10, 25, 50] });});
在上述代码中，我们通过设置 lengthMenu 选项为一个包含三个数字的数组，来设置每页显示条数的选项。这样，DataTable 将会在每页显示条数的下拉列表中显示这三个选项。
总结
本文介绍了如何使用 DataTable 设置默认的每页显示条数，并提供了相关的代码示例。通过设置 pageLength 或者 lengthMenu 选项，我们可以轻松地控制 DataTable 每页显示的条数。希望本文对你理解和使用 DataTable 有所帮助。
/*
Template Name: Zoter - Bootstrap 4 Admin Dashboard
Author: Mannatthemes
Website: www.mannatthemes.com
File: Datatable js
*/
$(document).ready(function() {
$('#datatable').DataTable();
var table3 = $('#datatable-buttons3').DataTable({
"pageLength": 20,
"lengthMenu": [10, 20, 50],
"order": [], // 不进行排序
"columnDefs": [
{
"targets": 0, // 第一列
"orderable": false // 禁用排序
}
],
"rowCallback": function(row, data, index) {
// 在每次更新行时重新填充序号
$('td:eq(0)', row).html(index + 1);
}
});
//Buttons examples
var table = $('#datatable-buttons').DataTable({
lengthChange: false,
"lengthChange": true, // 禁用更改每页显示数据数量
"pageLength": 500,
"lengthMenu": [10, 20, 50, 100, 150, 200, 500],
"scrollY": "2000px", // 设置DataTable的高度
"scrollCollapse": true, // 当显示的数据不足以填满分配的高度时，启用滚动条
"scrollX": true, // 启用水平滚动条
buttons: ['copy', 'excel', 'pdf', 'colvis'],
});
table.buttons().container()
.appendTo('#datatable-buttons_wrapper .col-md-6:eq(0)');
} );
(function(){
var oLanguage={
"oAria": {
"sSortAscending": ": 升序排列",
"sSortDescending": ": 降序排列"
},
"oPaginate": {
"sFirst": "首页",
"sLast": "末页",
"sNext": "下页",
"sPrevious": "上页"
},
"sEmptyTable": "没有相关记录",
"sInfo": "第 _START_ 到 _END_ 条记录，共 _TOTAL_ 条",
"sInfoEmpty": "第 0 到 0 条记录，共 0 条",
"sInfoFiltered": "(从 _MAX_ 条记录中检索)",
"sInfoPostFix": "",
"sDecimal": "",
"sThousands": ",",
"sLengthMenu": "每页显示条数: _MENU_",
"sLoadingRecords": "正在载入...",
"sProcessing": "正在载入...",
"sSearch": "搜索:",
"sSearchPlaceholder": "",
"sUrl": "",
"sZeroRecords": "没有相关记录"
}
$.fn.dataTable.defaults.oLanguage=oLanguage;
//$.extend($.fn.dataTable.defaults.oLanguage,oLanguage)
})();
在线咨询