javascriptjqueryangularjsdatatable

Move Datatable export button to bottom of table


I have created a export option in my datatable I want it to show below the table right now it is showing above the table. Talking about the download button to be shown at end of the table next to paging maybe.

$(document).ready(function (){
    var table = $('#example').DataTable({
        'responsive': true,
         dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    });

    // Handle click on "Expand All" button
    $('#btn-show-all-children').on('click', function(){
        // Expand row details
        console.log('Inside click');
        table.rows(':not(.parent)').nodes().to$().find('td:first-child').trigger('click');
    });

    // Handle click on "Collapse All" button
    $('#btn-hide-all-children').on('click', function(){
        // Collapse row details
        table.rows('.parent').nodes().to$().find('td:first-child').trigger('click');
    });

    $('#btn-show-all-children').trigger('click');
});

This is the fiddle https://jsfiddle.net/x5q3anys/


Solution

  • At dom settings string , put B at the end of the string like this:

    dom: 'frtipB'
    

    From the documentation:

    Each table control element in DataTables has a single letter associated with it, and that letter it used in this dom configuration option to indicate where that element will appear in the document order.

    Read more: documentation