Bootstrap DataTables lengthMenu选项失效及每页行数设置需求

嘿，我一眼就揪出问题所在了！你的DataTables配置里有两个关键遗漏，再加上重复引入的脚本可能引发冲突，下面一步步给你搞定：

问题根源 #

1. Dom配置缺失长度选择器标识：你设置的dom: 'Bfrtip'里没包含l（这个字符代表「行数选择控件」），所以分页行数选择菜单根本不会被渲染出来。
2. 未指定默认每页行数：没配置pageLength参数，DataTables就用了默认的10条展示量。
3. 重复引入脚本：代码里多次重复引入jQuery、DataTables核心和Buttons插件，很容易导致JS冲突，必须清理掉。

解决方案 #

核心配置修改 #

在DataTables初始化代码里做两个关键调整：

• 把dom参数改成'lBfrtip'，这样行数选择菜单就会显示出来
• 添加"pageLength": 50，直接把默认每页显示行数设为50

清理重复脚本 #

删掉重复引入的jQuery、DataTables和Buttons相关文件，只保留一套最新版本即可，避免冲突。

修改后的完整代码 #

<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" /> 
    <!-- 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" /> 
    <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://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script> 
    <script src="https://cdn.datatables.net/buttons/1.6.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.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"> 
</head>
<div class="w3-content" style="max-width:2000px;margin-top:46px">
    <h1>Access Project Search</h1> 
    <script> 
        $(document).ready(function() { 
            $('#example').DataTable( { 
                "lengthMenu": [ 10, 25, 50, 75, 100 ],
                "pageLength": 50, // 新增：设置默认每页显示50条
                dom: 'lBfrtip', // 修改：添加'l'来渲染行数选择菜单
                "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>
</div>

验证效果 #

• 现在页面会显示包含10/25/50/75/100选项的行数选择下拉菜单
• 表格默认按50条/页加载（即使当前只有3条数据，后续数据量上来后会自动生效分页逻辑）

内容的提问来源于stack exchange，提问作者tenebris silentio