Show records per page drop down along with export button on datatables

Question

Unable to show records per page drop down after displaying the export buttons. I want to display both of them on my table. Here is my code:

$(document).ready(function() {
    $('#dataTables-example').DataTable({
        pageLength: 5,
        dom: 'Bfrtip',
        buttons: ['csv', 'excel', 'pdf', 'print'],
        responsive: true
    });
    $('.datetext').datepicker({
        format: "yyyy-mm-dd"
    });
});

Records per page drop down displayed if I remove the buttons on the tables, But I want to display both of them. How to display both of them?

Answer 1

This layout is done here:

dom: 'Bfrtip',

So you have several options for this, and I don't know what you wish to do, but try this:

dom: 'flit',

This will show the selector on the left. The buttons you are adding are normally added to the right, so you need to set this to the left.

Answer 2

If i'm not wrong you are looking to have both pagelength and export buttons visible together. As per me, rather than going for a native drop down you can actually get a real nice button click drop down with the below code, in addition to your native export buttons. You just need to pass the 'pageLength' argument for initializing the DT with additional button which would be the placeholder for page length drop down. Example would be.

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        // Configure the drop down options.
        lengthMenu: [
            [ 10, 25, 50, -1 ],
            [ '10 rows', '25 rows', '50 rows', 'Show all' ]
        ],
        // Add to buttons the pageLength option.
        buttons: [
            'pageLength','excel','print'
        ]
    });
});

Do not forget to include the select js and css. You can find the here