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

Posted 2023-05-07

【中文标题】将数据表导出按钮移动到表格底部

【英文标题】：Move Datatable export button to bottom of table

【发布时间】：2019-10-28 21:52:05

【问题描述】：

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

$(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/

【问题讨论】：

DataTable export button outside table的可能重复

【参考方案1】：

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

dom: 'frtipB'

来自文档：

DataTables 中的每个表格控件元素都有一个字母 与它相关联，以及它在这个 dom 配置中使用的那个字母 用于指示该元素将出现在文档中的位置的选项 顺序。

阅读更多：documentation

【讨论】：

@BillP 感谢这项工作。你能告诉我如何将按钮对齐到中心吗？？

你可以使用这个css：.dt-buttons text-align: center;

@BillP 是否可以在 js 文件而不是 css 上执行此操作？

你可以尝试用jquery应用css：link

【参考方案2】：

这会将导出按钮置于表格下方的中心

将此 css 添加到 css 文件：

您可以相应地编辑此 css

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

【讨论】：

试过了，但是当我在谷歌浏览器上检查时它被删除了。

你是什么意思？

未应用。好吧，我想出了一种使用 CSS 的不同方式。我可以知道我们可以改变分页的位置吗？无论我尝试什么，分页似乎都占据了最正确的位置。

那没有但找到了不同的解决方案。我用这个 .dataTables_wrapper .dt-buttons float:none;文本对齐：左；

是的，您也可以更改其他元素的 css ...只需检查并查看其类并将其用作 dt 按钮