从 Jquery 数据表中隐藏 LengthMenu答案

【问题标题】：Hide LengthMenu from Jquery datatable从 Jquery 数据表中隐藏 LengthMenu
【发布时间】：2013-11-24 13:50:48
【问题描述】：

请问如何从我的 Jquery 数据表中隐藏 LengthMenu（显示每页显示的记录数的下拉列表）？

目前我可以禁用它，但我根本不希望它出现。见我的Fiddle here 下面：-

testdata = [{"id":"58","country_code":"UK"},{"id":"59","country_code":"US"}];
$('#test').dataTable({
    "aaData": testdata,
    "aoColumns": [
        { "mDataProp": "id" },
        { "mDataProp": "country_code" }
    ],
    "bLengthMenu" : false, //thought this line could hide the LengthMenu
    "bInfo":false,    
});
`//the next 2 lines disables the LengthMenu
//var aLengthMenu = $('select[name=test_length]');
//$(aLengthMenu).prop('display', 'disabled');

【问题讨论】：

标签： javascript jquery jquery-datatables

【解决方案1】：

试试

$('#test').dataTable({
    "aaData": testdata,
    "aoColumns": [
        { "mDataProp": "id" },
        { "mDataProp": "country_code" },
        { "mDataProp": "title" },
        { "mDataProp": "pubdate" },
        { "mDataProp": "url" }
    ],
    "bLengthChange" : false, //thought this line could hide the LengthMenu
    "bInfo":false,    
});

Fiddle

【讨论】：

【解决方案2】：

这样做：

"bLengthChange": false

这将隐藏长度下拉菜单。

【讨论】：

【解决方案3】：

您可以通过禁用分页来做到这一点：

"bPaginate": false

【讨论】：

谢谢，但我不想禁用分页。
你知道如何自定义分页吗？

【解决方案4】：

要完全禁用分页，然后执行：

"paging": false

【讨论】：

【解决方案5】：

从 DataTables 1.10.18 开始，根据https://datatables.net/reference/option/lengthChange 这是隐藏lengthMenu的推荐方法：

$('#example').dataTable( { "lengthChange": false } );

干杯

【讨论】：

【解决方案6】：

如果使用引导程序或其他一些模板，隐藏长度菜单的结果可能会有点难看，比如缺少边框。

对我有用的是使用 css 和操作标签标签

.dataTables_length label { display:none;}

【讨论】：

【解决方案7】：

如果你想隐藏分页和“显示 X 条目”下拉选项，只有当数据行可以放在一个页面中时，你可以使用drawCallback：

"drawCallback": function (settings) {
    var api = this.api();
    var totalRows = api.rows().data().length; //Get total rows of data
    var rowPerPage = api.rows({ page: 'current' }).data().length; //Get total rows of data per page
    if (totalRows > rowPerPage) {
            //Show pagination and "Show X Entries" drop down option
            $('div.dataTables_paginate')[0].style.display = "block";
            $('div.dataTables_length')[0].style.display = "block";
    } else {
            //Hide it
            $('div.dataTables_paginate')[0].style.display = "none";
            $('div.dataTables_length')[0].style.display = "none";
    }
}

或者，您可以参考this discussion，非常相似的方法。

【讨论】：