Question

我使用的是JQuery Datatable：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;
}

Answer 1

使用以下dom值

dom: 'Blfrtip',

Answer 2

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

Answer 3

您需要指定数据表窗口小部件在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

Answer 4

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

Answer 5

感谢您举报，您可以尝试以下方式解决问题。关键是要使用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,
..

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

5 个答案: