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

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

在dom设置字符串中，将B放在字符串的末尾，如下所示：

dom: 'frtipB'

从文档中：

数据表中的每个表控件元素都有一个字母 与之相关，以及它在此 DOM 配置中使用的字母 用于指示该元素在文档中的显示位置的选项 次序。

阅读更多：文档

Answer 2

这将导出按钮放在表格下方的中心

将此 css 添加到 css 文件：

您可以相应地编辑此 css

.dt-buttons {
    /* margin-bottom: -7px; */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}