web-dev-qa-db-fra.com

Changer les valeurs de la boite de sélection "afficher 10 entrées" de jquery datatable

Par défaut, jquery datatable affiche 10 par défaut et a 

options: 10,25,50,100  

Comment puis-je changer ces options?

jquerydatatables
52
rjmcb

N'oubliez pas de changer également iDisplayLength:

$(document).ready(function() {
    $('#tbl_id').dataTable({
        "aLengthMenu": [[25, 50, 75, -1], [25, 50, 75, "All"]],
        "iDisplayLength": 25
    });
} );
126
davesave
$(document).ready(function() {
    $('#example').dataTable( {
    "aLengthMenu": [[25, 50, 75, -1], [25, 50, 75, "All"]],
    "pageLength": 25
    } );
} );

aLengthMenu: Ce paramètre vous permet de spécifier facilement les entrées dans le menu déroulant des longueurs que DataTables affiche lorsque la pagination est activée. Il peut s'agir d'un tableau d'options 1D qui sera utilisé à la fois pour l'option affichée et la valeur, ou d'un tableau 2D qui utilisera le tableau dans la première position en tant que valeur et le tableau dans la deuxième position en tant qu'options affichées. (utile pour les chaînes de langue telles que 'All').

Mettre à jour

Depuis DataTables v1.10, les options que vous recherchez sont pageLength et lengthMenu

39
Priyank Patel

Dans mon cas, aLengthMenu ne fonctionne pas. Donc j'ai utilisé ça. Et ça marche.

jQuery('#dyntable3').dataTable({            
            oLanguage: {sLengthMenu: "<select>"+
            "<option value='100'>100</option>"+
            "<option value='200'>200</option>"+
            "<option value='300'>300</option>"+
            "<option value='-1'>All</option>"+
            "</select>"},
            "iDisplayLength": 100

        });

Je vous remercie

7
Mira Padalia

Selon datatables.net , la méthode appropriée consiste à ajouter la propriété lengthMenu à un tableau de valeurs. 

$(document).ready(function() {
    $('#example').dataTable( {
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
    } );
} );
6
MZaragoza
 $('#tblSub1View').dataTable({
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "bDestroy": true,
                    "aoColumnDefs": [{
                        'bSortable': false,
                        'aTargets': [0, 1]
                    }],
                    "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                    "iDisplayLength": 10,
                });
4
user3789888

si vous cliquez sur un bouton ， puis modifiez les données de la longueur d'affichage ， vous pouvez essayer ceci:

 $('.something').click( function () {
var oSettings = oTable.fnSettings();
oSettings._iDisplayLength = 50;
oTable.fnDraw();
});

oTable = $('#example').dataTable();
2
nihaoqiulinhe

Si vous voulez utiliser 'lengthMenu' avec des boutons (copier, exporter), vous devez utiliser cette option dom: 'lBfrtip' . Ici https://datatables.net/reference/option/dom vous pouvez trouver la signification de chaque symbole . Par exemple, si vous utilisez comme ceci 'Bfrtip', lengthMenu n'apparaîtra pas. 

1
Kirill A

 enter image description here longueur de page: 50, 

travaillé pour moi merci

Versions pour référence

jquery-3.3.1.js

/1.10.19/js/jquery.dataTables.min.js

/buttons/1.5.2/js/dataTables.buttons.min.js

0
subramanya4

vous pouvez y arriver facilement sans écrire Js. Ajoutez simplement un attribut appelé data-page-length = {mettez votre numéro ici}. voir exemple ci-dessous, j'ai utilisé 100 par exemple

<table id="datatable-keytable" data-page-length='100' class="p-table table table-bordered" width="100%">
0
Sodruldeen Mustapha