将数据表导出按钮移动到表格底部

Question

我在我的数据表中创建了一个导出选项，我希望它现在显示在表格下方，它显示在表格上方。谈论可能会在分页旁边的表格末尾显示下载按钮。

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

});

这是小提琴https://jsfiddle.net/x5q3anys/

Answer 1

这将导出按钮置于表格下方的中心将此 css 添加到 css 文件：您可以相应地编辑此 css.dt-buttons {    /* margin-bottom: -7px; */    position: absolute;    bottom: 0;    left: 0;    right: 0;    text-align: center;}