jquery 数据表:页面长度选择列表未显示

BAE*_*BAE 5 javascript jquery datatables

我正在使用 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
Run Code Online (Sandbox Code Playgroud)

输出: 在此处输入图片说明

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

在此处输入图片说明

怎么做?缺什么吗?

更新

输出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>
Run Code Online (Sandbox Code Playgroud)

但它根本没有显示。

更新

原因是:

.dataTables_length {
        display: none;
}
Run Code Online (Sandbox Code Playgroud)

小智 19

使用下面的dom值,

dom: 'Blfrtip',
Run Code Online (Sandbox Code Playgroud)


Baq*_*qvi 6

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


Erw*_* O. 2

您需要指定数据表小部件在 dom 中的何处显示页面大小。

有 dom 选项,如下所示:

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

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