我有一个引导数据表可搜索表，除了不能让用户选择每页看到多少行之外，它运行得很好。现在，它默认为每页只有10个结果。为了简单起见，我只包含了3行，但我想知道我做错了什么，为什么菜单没有显示，让用户选择每页的结果数。或者，如果把它设置为50更容易，我会这么做。无论哪种方式，10都不会削减。
我尽我最大的努力添加"strong"；lengthMenu"：[10，25，50，75，100]根据Datatables文档，但我显然遗漏了一些内容。
一句话：我需要(1(菜单来选择每页的结果数量，或者(2(能够选择50作为每页的结果数，而不是默认的10。
<head>
<title>Project Search</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
<link rel"=stylesheet" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<link href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.colVis.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</div><div class="w3-content" style="max-width:2000px;margin-top:46px"><h1>Access Project Search<p><p></h1>
<script>
$(document).ready(function() {
$('#example').DataTable( {
"lengthMenu": [ 10, 25, 50, 75, 100 ],
dom: 'Bfrtip',
"columnDefs": [
{
"targets": [ ],
"visible": false,
"searchable": false
},
{
"targets": [ ],
"visible": false
}
],
buttons: [
{
extend: 'copyHtml5',
exportOptions: {
columns: ':visible',
format: {
body: function ( data, row, column, node ) {
var text = node.textContent;
return column === 10 ? text.replace( /Open$/, '' ).trim() : data;
}
}
}
},
{
extend: 'excelHtml5',
exportOptions: {
columns: ':visible',
format: {
body: function ( data, row, column, node ) {
var text = node.textContent;
return column === 10 ? text.replace( /Open$/, '' ).trim() : data;
}
}
}
},
{
extend: 'csvHtml5',
exportOptions: {
columns: ':visible',
format: {
body: function ( data, row, column, node ) {
var text = node.textContent;
return column === 10 ? text.replace( /Open$/, '' ).trim() : data;
}
}
}
},
{
extend: 'pdfHtml5',
orientation: 'landscape',
exportOptions: {
columns: ':visible',
format: {
body: function ( data, row, column, node ) {
var text = node.textContent;
return column === 10 ? text.replace( /Open$/, '' ).trim() : data;
}
}
}
},
'colvis'
]
} );
} );
</script>
<style>
td.none {
display: none;
}
</style>
<style>
.modal {
max-width: 1000px;
margin: 2rem auto;
}
</style>
<style>
.display.dataTable {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 12px;
}
</style>
<style>
div.dt-button-collection {
width: 215px;
}
</style>
<table id="example" class="display">
<thead>
<tr>
<th class="all" data-toggle="tooltip" title="The known name of the project." >Project Name</th>
<th class="all" data-toggle="tooltip" title="The provided unique ID that distinguishes projects.">Project Number</th>
<th class="all" data-toggle="tooltip" title="The conclusing time point of a project, which is sometimes, but not always the point at which funding ends.">End Date</th>
<th class="all" data-toggle="tooltip" title="The primary funder of the project.">Funder</th>
<th class="all" data-toggle="tooltip" title="A brief description on the scope and aims of a project.">Abstract</th>
</tr>
</thead>
<tbody>
<tr>
<td>Project 1</td>
<td>P-1</td>
<td>2018-04-30 00:00:00</td>
<td>NIH</td>
<td><div id="ex83"class="modal">
<p>
Abstract 1 <a href="#" rel="modal:close"></a>
</div>
<p><a href="#ex83" rel="modal:open"><button class="button">Open<span></span></button></a></p></td></tr>
<tr>
<td>Project 2</td>
<td>P-2</td>
<td>2024-03-31 00:00:00</td>
<td>NIH</td>
<td><div id="ex103"class="modal">
<p>
Abstract 2 <a href="#" rel="modal:close"></a>
</div>
<p><a href="#ex103" rel="modal:open"><button class="button">Open<span></span></button></a></p></td></tr>
<tr>
<td>Project 3</td>
<td>P-3</td>
<td>2021-01-31 00:00:00</td>
<td>NIH</td>
<td><div id="ex111"class="modal">
<p> Abstract 3</p>
<a href="#" rel="modal:close"></a>
</div>
<p><a href="#ex111" rel="modal:open"><button class="button">Open<span></span></button></a></p></td></tr>
</tbody>
</table>
这是因为您的dom: 'Bfrtip',选项。将l(字母l(添加到其列表中，或者如果不需要dom选项，则完全删除它，只使用默认布局。
请参阅此处了解详细信息，解释所有字母的含义。