jquery datatable: page length select list not shown

Question

I am using JQuery Datatable: 1.10.7 and https://datatables.net/reference/option/lengthMenu

JS code:

      $('.table').dataTable({ 
'lengthMenu': [ [10, 25, 50, -1], [10, 25, 50, 'All'] ], 
'aoColumns': [null, null, null, { 'bSortable': false }, { 'bSortable': false }] }); // eslint-disable-line new-cap

Output:

But I need the following list to set page length:

How to do? Anything missing?

UPDATE

Output html:

<div id="DataTables_Table_0_length" class="dataTables_length">
   <label>
      Show 
      <select class="" aria-controls="DataTables_Table_0" name="DataTables_Table_0_length">
         <option value="10">10</option>
         <option value="25">25</option>
         <option value="50">50</option>
         <option value="-1">All</option>
      </select>
      entries
   </label>
</div>

But it is not shown at all.

UPDATE

The reason is:

.dataTables_length {
        display: none;
}

What version of dataTables are you using as they changed the parameter name a few times in the past. — iCollect.it Ltd, Apr 18 '16 at 20:01
"datatables": "git://github.com/DataTables/DataTables.git#1.10.7", — BAE, Apr 18 '16 at 20:06
It looks that that parameter is now just `lengthChange` (no `b`) — iCollect.it Ltd, Apr 18 '16 at 20:08
@Antony Still missing "page length select list" https://datatables.net/reference/option/lengthMenu — BAE, Apr 19 '16 at 17:03
@BAE please show us the `"dom" : ` options you are using, i think your problem with it. — Shady Alset, Apr 19 '16 at 18:19
@ShadyAlset Thanks. I already updated my post. I am not sure whether it is what you are looking for. I did not use ""dom": 'lrtip'" in my js codes. I just used default for almost everything — BAE, Apr 19 '16 at 18:22
@BAE sorry but I meant the `dom: ` option of datatables such as `lengthMenu: ` or `aoColumns: ` and so on, have you used it in your table ? — Shady Alset, Apr 19 '16 at 18:26
@BAE oh the **l**ength changing input control is included in dom options, i thought it missed, Thanks. — Shady Alset, Apr 19 '16 at 18:33
Please create a live example to work on it if you can, [live.datatables.net](http://live.datatables.net/) — Shady Alset, Apr 19 '16 at 18:47
You can find more info here: https://stackoverflow.com/questions/10630853/change-values-of-select-box-of-show-10-entries-of-jquery-datatable/47885699#47885699 — Kirill A, Dec 19 '17 at 11:16

score 29 · Answer 1 · answered Aug 02 '19 at 13:23

29

Use the below dom value,

dom: 'Blfrtip',

answered Aug 02 '19 at 13:23

shubomb

672
7
20

score 8 · Answer 2 · answered Oct 17 '19 at 18:09

8

You might be using Bfrtip as dom value. Try using Blfrtip. It will show Export buttons as well length menu.

answered Oct 17 '19 at 18:09

Baqer Naqvi

6,011
3
50
68

score 3 · Answer 3 · answered May 26 '20 at 08:12

Thanks to report, You can try the following way to solve it. Key point is to use dom:'Blfrtip'

 $('#tblClient').DataTable({
            dom: 'Blfrtip',
            buttons: [
                'colvis',
                'excel', {
                    extend: 'pdfHtml5',
                    exportOptions: {
                        columns: ':visible'
                    },
                    text: 'Download Pdf',
                    title: 'HCA Registration for Worker Portal',
                    orientation: 'landscape',
                    customize: function (doc) {
                        // Splice the image in after the header, but before the table
                        doc.content.splice(1, 0, {
                            margin: [0, 0, 0, 12],
                            alignment: 'center',
                            image: 'data:image/png;base64,iVBORw0KGgoAA..'

                        });

                    }
                }],
            'ordering': true,
            'searching': true,
            'info': true,
            "serverSide": false,
            "lengthMenu": [[50, 100 - 1], [50, 100, "All"]],
            "pageLength": 50,
..

score 2 · Answer 4 · answered Apr 19 '16 at 18:36

You need to specify where in the dom the datatable widget will show the page size.

There is the dom option, something like this:

$('.table').dataTable({ 
'lengthMenu': [ [10, 25, 50, -1], [10, 25, 50, 'All']     ], 
'aoColumns': [null, null, null, { 'bSortable': false }, { 'bSortable': false }]
dom:'<"yourcssstyle"l>'
});

https://datatables.net/reference/option/dom

score 0 · Answer 5 · answered Apr 17 '19 at 11:41

0

use id="datatable-keytable" in your table tag

answered Apr 17 '19 at 11:41

Sodruldeen Mustapha

1,135
10
22

jquery datatable: page length select list not shown

5 Answers5