从 Jquery 数据表中隐藏 LengthMenu

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19928753/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 00:50:11  来源:igfitidea点击:

Hide LengthMenu from Jquery datatable

javascriptjqueryjquery-datatables

提问by Sola Oderinde

Please how do I hide the LengthMenu (the dropdownlist that displays number of records being shown per page) from my Jquery datatable?

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

Currently I am able to disable it, but I do not want it to appear at all. See my Fiddle herebelow:-

目前我可以禁用它,但我根本不希望它出现。下面查看我的小提琴:-

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');

回答by Sridhar R

Try with

试试

$('#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

小提琴

回答by homtg

Do it with:

这样做:

"bLengthChange": false

This will hide the length dropdown.

这将隐藏长度下拉列表。

回答by MythThrazz

You can do it by disabling the pagination:

您可以通过禁用分页来实现:

"bPaginate": false

回答by Ghasan

To disable pagination at all, then do:

要完全禁用分页,请执行以下操作:

"paging": false

回答by Veeru

If using bootstrap or some other templates, the result of hiding the length menu could get a little ugly, like, missing borders.

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

What worked for me was to use css and manipulate the label tag

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

.dataTables_length label { display:none;}

回答by Sharukh Mastan

As of DataTables 1.10.18, according to https://datatables.net/reference/option/lengthChangeThis is the recommended method to hide lengthMenu:

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

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

Cheerrs

干杯

回答by John

If you want to hide the pagination and "Show X Entries" drop down option ONLY when the data rows can fit in a single page, you can use drawCallback:

如果您只想在数据行可以容纳在单个页面中时隐藏分页和“显示 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";
    }
}

Alternatively, you can refer to this discussion, quite similar approach.

或者,您可以参考这个讨论,非常相似的方法。