web-dev-qa-db-fra.com

Masquer LengthMenu de Jquery datatable

Comment masquer le LengthMenu (la liste déroulante qui affiche le nombre d’enregistrements affichés par page) de mon datable Jquery?

Je suis actuellement en mesure de le désactiver, mais je ne souhaite pas qu'il apparaisse du tout. Voir mon Fiddle ici Ci-dessous: -

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
20
Sola Oderinde

Essayer avec

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

39
Sridhar R

Faites-le avec:

"bLengthChange": false

Cela cachera la liste déroulante des longueurs.

16
homtg

Vous pouvez le faire en désactivant la pagination:

"bPaginate": false
5
MythThrazz

Pour désactiver la pagination, procédez comme suit:

"paging": false
3
Ghasan

Si vous utilisez bootstrap ou un autre modèle, le résultat consistant à masquer le menu de longueur risque de devenir un peu moche, comme des bordures manquantes.

Ce qui a fonctionné pour moi a été d’utiliser css et de manipuler l’étiquette

.dataTables_length label { display:none;}
2
Veeru

Si vous souhaitez masquer la pagination et l'option de menu déroulant "Afficher les entrées X" UNIQUEMENT lorsque les lignes de données peuvent tenir dans une seule page, vous pouvez utiliser 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";
    }
}

Alternativement, vous pouvez vous référer à cette discussion , approche assez similaire.

0
John

À partir de DataTables 1.10.18, selon https://datatables.net/reference/option/lengthChange Il s'agit de la méthode recommandée pour masquer lengthMenu:

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

Cheerrs

0
Sharukh Mastan