[jquery] Change values of select box of "show 10 entries" of jquery datatable

By default, jquery datatable shows 10 by default and has

options : 10,25,50,100

How can I change these options?

if you click some button,then change the datatables the displaylenght,you can try this :

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

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

If you want to use 'lengthMenu' together with buttons(copy, export), you have to use this option dom: 'lBfrtip'. Here https://datatables.net/reference/option/dom you can find meaning of each symbol. For example, if you will use like this 'Bfrtip', lengthMenu will not appears.

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

pageLength: 50,

worked for me Thanks

Versions for reference

jquery-3.3.1.js

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

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

you can achieve this easily without writing Js. Just add an attribute called data-page-length={put your number here}. see example below, I used 100 for example

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

According to datatables.net the proper way to do this is adding the lengthMenu property with an array of values.

$(document).ready(function() {
    $('#example').dataTable( {
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
    } );
} );

In my case , aLengthMenu is not working. So i used this. And it is working.

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

        });

Thank you

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

aLengthMenu : This parameter allows you to readily specify the entries in the length drop down menu that DataTables shows when pagination is enabled. It can be either a 1D array of options which will be used for both the displayed option and the value, or a 2D array which will use the array in the first position as the value, and the array in the second position as the displayed options (useful for language strings such as 'All').

Update

Since DataTables v1.10, the options you are looking for are pageLength and lengthMenu