web-dev-qa-db-ja.com

JQueryデータテーブルからLengthMenuを非表示にする

JQueryデータテーブルからLengthMenu（ページごとに表示されているレコードの数を表示するドロップダウンリスト）を非表示にするにはどうすればよいですか？

現在、私はそれを無効にすることができます、しかし、私はそれをまったく見せたくありません。私の ここで中 以下を参照してください：-

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');
javascriptjqueryjquery-datatables
23
Sola Oderinde

で試す

$('#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,    
});

フィドル

44
Sridhar R

でそれを行う：

"bLengthChange": false

これにより、長さのドロップダウンが非表示になります。

17
homtg

ページネーションを無効にすることでそれを行うことができます：

"bPaginate": false
6
MythThrazz

bootstrapまたは他のテンプレートを使用している場合、長さメニューを非表示にすると、境界線が欠落するなど、少し見苦しくなります。

私のために働いたのは、CSSを使用してラベルタグを操作することでした

.dataTables_length label { display:none;}
3
Veeru

ページネーションをまったく無効にするには、次を実行します。

"paging": false
3
Ghasan

DataTables 1.10.18現在、 https://datatables.net/reference/option/lengthChange に従って、これはlengthMenuを非表示にする推奨方法です。

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

チアーズ

1
Sharukh Mastan

ページ区切りを非表示にし、「Xエントリを表示」ドロップダウンオプションのみをデータ行が1ページに収まる場合に使用するには、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";
    }
}

または、 この説明 を参照することもできます。これは非常によく似たアプローチです。

0
John