How to show length menu of a JQuery DataTable? It disappear upon activating exportation (COPY, EXCEL, PDF). I already added the lengthMenu but it is not showing the drop down. This is what i did:

$(document).ready(function() {
    var table = $('#example').DataTable( {
        lengthChange: false,
        buttons: [ 'copy', 'excel', 'pdf' ],
        responsive: true,
        'columnDefs': [ {
                'targets': [6], /* column index */
                'orderable': false, /* true or false */
                'lengthMenu': [[10, 25, 50, -1], [10, 25, 50, "All"]]
        }]
    } );
    table.buttons().container().appendTo( '#example_wrapper .col-md-6:eq(0)' );
} );

I am using the jquery 3.3.1 and datatables 1.10.19 via cdn.

How to show length menu of a JQuery DataTable? It disappear upon activating exportation (COPY, EXCEL, PDF). I already added the lengthMenu but it is not showing the drop down. This is what i did:

$(document).ready(function() {
    var table = $('#example').DataTable( {
        lengthChange: false,
        buttons: [ 'copy', 'excel', 'pdf' ],
        responsive: true,
        'columnDefs': [ {
                'targets': [6], /* column index */
                'orderable': false, /* true or false */
                'lengthMenu': [[10, 25, 50, -1], [10, 25, 50, "All"]]
        }]
    } );
    table.buttons().container().appendTo( '#example_wrapper .col-md-6:eq(0)' );
} );

I am using the jquery 3.3.1 and datatables 1.10.19 via cdn.

• javascript
• jquery
• datatables

3 Answers 3

Try to add the dom param like dom: 'Blfrtip'. See also the documentation

$(document).ready(function() {
    var table = $('#example').DataTable( {
        lengthChange: true,
        buttons: [ 'copy', 'excel', 'pdf' ],
        responsive: true,
        dom: 'Blfrtip',
        columnDefs: [ {
                targets: [6], /* column index */
                orderable: false, /* true or false */
                lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]]
        }]
    } );
    table.buttons.container.appendTo( '#example_wrapper .col-md-6:eq(0)' );
} );

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table id="example">
  <thead>
    <tr>
      <th>Example</th>
      <th>Example</th>
      <th>Example</th>
      <th>Example</th>
      <th>Example</th>
      <th>Example</th>
      <th>Example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Example</td>
      <td>Example</td>
      <td>Example</td>
      <td>Example</td>
      <td>Example</td>
      <td>Example</td>
      <td>Example</td>
    </tr>
  </tbody>
</table>
  

you should add dom:

dom: 'Bflrtip'

read more about datatables dom

and lengthMenu position should be fixed

and lengthChange should be true:

$(document).ready(function() {
    var table = $('#example').DataTable( {
        lengthChange: true,
        dom: 'Bflrtip', 
        buttons: [ 'copy', 'excel', 'pdf' ],
        responsive: true,
        'columnDefs': [ {
                'targets': [6], /* column index */
                'orderable': false, /* true or false */
        }],
        'lengthMenu': [[10, 25, 50, -1], [10, 25, 50, "All"]]
    } );
    table.buttons().container().appendTo( '#example_wrapper .col-md-6:eq(0)' );
} );

Try adding the dom settings like this:

$(document).ready(function() {
    var table = $('#example').DataTable( {
        lengthChange: false,
        buttons: [ 'copy', 'excel', 'pdf' ],
        responsive: true,
        dom: 'lfrtip',
        'columnDefs': [ {
                'targets': [6], /* column index */
                'orderable': false, /* true or false */
                'lengthMenu': [[10, 25, 50, -1], [10, 25, 50, "All"]]
        }]
    } );
    table.buttons().container().appendTo( '#example_wrapper .col-md-6:eq(0)' );
} );

For more information see answers on this forum discussion