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

Question

By default, jquery datatable shows 10 by default and has

options : 10,25,50,100

How can I change these options?

score 146 · Accepted Answer · answered Apr 18 '13 at 15:17

146

Don't forget to change the iDisplayLength as well:

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

answered Apr 18 '13 at 15:17

davesave

2,863
1
18
13

14

```iDisplayLength``` is now legacy. Use ```pageLength``` instead. – dekkard May 17 '15 at 11:41
1

You can also use the option name: `lengthMenu` instead of `aLengthMenu ` in newer versions too. – racl101 Jul 29 '17 at 23:32

Priyank Patel · Answer 2 · 2015-06-15T10:12:46.400

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

i have used your above logic, its working fine, but in the show entries select box, still i am having 10 25 50, in my case it should display 5 10 50 100.. How to change the select box entries? — Raghuveer, Jun 01 '12 at 05:28

score 10 · Answer 3 · answered Dec 03 '14 at 07:07

10

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

answered Dec 03 '14 at 07:07

Mira Padalia

111
1
5

Thank you so much for this update. aLengthMenu was not working for me either. – AJ_ Jul 29 '20 at 20:26

score 8 · Answer 4 · answered Jan 22 '15 at 15:29

8

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"]]
    } );
} );

answered Jan 22 '15 at 15:29

MZaragoza

10,108
9
71
116

I like that you added the link to the source. This worked perfectly – Aldo Delgado Feb 28 '15 at 17:47

score 5 · Answer 5 · answered Jul 17 '14 at 11:55

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

score 2 · Answer 6 · answered Dec 14 '16 at 02:23

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

score 2 · Answer 7 · answered Apr 17 '19 at 11:35

2

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%">

answered Apr 17 '19 at 11:35

Sodruldeen Mustapha

1,135
10
22

1

Thanks, it worked without javascript – Fatih Baltacı Apr 30 '22 at 23:54

score 1 · Answer 8 · answered Dec 19 '17 at 11:12

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.

score 0 · Answer 9 · edited Aug 01 '22 at 08:45

<!-- <script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" crossorigin="anonymous"></script> -->
<script src="js/datatables-simple-demo.js"></script>
<script src="js/tables.js"></script>

download/copas from online link if you have in footer tag. and copy paste make offline js extension like tables.js. then, you can edit the number of entries. You can search with keyword "entries per page" in tables.js. Find on near that keyword

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

9 Answers9

Linked