jquery datatable：页面长度选择列表未显示

Posted 2023-05-07

【中文标题】jquery datatable：页面长度选择列表未显示

【英文标题】：jquery datatable: page length select list not shown

【发布时间】：2016-08-10 17:29:42

【问题描述】：

我正在使用 JQuery 数据表：1.10.7 和 https://datatables.net/reference/option/lengthMenu

JS代码：

      $('.table').dataTable( 
'lengthMenu': [ [10, 25, 50, -1], [10, 25, 50, 'All'] ], 
'aoColumns': [null, null, null,  'bSortable': false ,  'bSortable': false ] ); // eslint-disable-line new-cap

输出：

但我需要以下列表来设置页面长度：

怎么办？有什么遗漏吗？

更新

输出html：

<div id="DataTables_Table_0_length" class="dataTables_length">
   <label>
      Show 
      <select class="" aria-controls="DataTables_Table_0" name="DataTables_Table_0_length">
         <option value="10">10</option>
         <option value="25">25</option>
         <option value="50">50</option>
         <option value="-1">All</option>
      </select>
      entries
   </label>
</div>

但是根本没有显示出来。

更新

原因是：

.dataTables_length 
        display: none;

【问题讨论】：

您使用的是什么版本的数据表，因为它们过去曾多次更改参数名称。

"数据表": "git://github.com/DataTables/DataTables.git#1.10.7",

看起来那个参数现在只是lengthChange（没有b）

"lengthMenu": [ 10, 25, 50, 75, 100 ]

您可以在这里找到更多信息：***.com/questions/10630853/…

【参考方案1】：

使用下面的dom值，

dom: 'Blfrtip',

【参考方案2】：

您可能使用Bfrtip 作为 dom 值。尝试使用Blfrtip。它将显示导出按钮以及长度菜单。

【参考方案3】：

感谢举报，您可以尝试以下方法解决。 关键是使用dom:'Blfrtip'

 $('#tblClient').DataTable(
            dom: 'Blfrtip',
            buttons: [
                'colvis',
                'excel', 
                    extend: 'pdfHtml5',
                    exportOptions: 
                        columns: ':visible'
                    ,
                    text: 'Download Pdf',
                    title: 'HCA Registration for Worker Portal',
                    orientation: 'landscape',
                    customize: function (doc) 
                        // Splice the image in after the header, but before the table
                        doc.content.splice(1, 0, 
                            margin: [0, 0, 0, 12],
                            alignment: 'center',
                            image: 'data:image/png;base64,iVBORw0KGgoAA..'

                        );

                    
                ],
            'ordering': true,
            'searching': true,
            'info': true,
            "serverSide": false,
            "lengthMenu": [[50, 100 - 1], [50, 100, "All"]],
            "pageLength": 50,
..

【参考方案4】：

您需要指定数据表小部件在 dom 中的哪个位置显示页面大小。

有 dom 选项，类似这样：

$('.table').dataTable( 
'lengthMenu': [ [10, 25, 50, -1], [10, 25, 50, 'All']     ], 
'aoColumns': [null, null, null,  'bSortable': false ,  'bSortable': false ]
dom:'<"yourcssstyle"l>'
);

https://datatables.net/reference/option/dom

【参考方案5】：

在表格标签中使用 id="datatable-keytable"