如何将第二个 CSV 导出按钮添加到 DataTable？答案

【问题标题】：How to add second CSV export button to DataTable?如何将第二个 CSV 导出按钮添加到 DataTable？
【发布时间】：2017-12-02 08:57:37
【问题描述】：

我已将 CSV 按钮配置为正常工作。现在，我的客户还希望将第二个 CSV 按钮添加到表格底部，这样如果有人滚动到底部，他们就不必转到表格顶部来导出。

opentable = $("#open").dataTable( {
    dom: "Bfrtip",
    "data": openData,
    "columns": [{
        data: "severity", render: function (data, type, row) {
            if (type === 'export') {                            
                return data;                        
            } else {                            
                return '';                         
        }          
    }],         
    "paging": true,         
    "searching": true,         
    buttons : [{             
        extend: 'csv',             
        exportOptions: {                 
            columns: [0,1,2,3,4,5,6,7,8,9,10], orthogonal: 'export'             
        }          
    }]        
});

如果不清楚，我想从第一张图片转到第二张：

【问题讨论】：

标签： jquery datatables

【解决方案1】：

我玩了几个小时的数据表，直到我偶然发现dom page 并意识到我可以添加一个秒 B。

我的 dom 现在是 BfrtBip，这会在信息之前添加第二个按钮（在表格下方）。您可以使用此方法添加任何内容的第二个（第三个、第四个等...）。

【讨论】：

【解决方案2】：

也许您可以克隆包含按钮的类，然后将其添加到靠近底部的某个位置

$(".dt-buttons").clone(true).prependTo(".dataTables_info");

这是一个活生生的例子： http://live.datatables.net/tehopova/1/edit

【讨论】：

我完全按照您的代码进行操作，但没有任何反应。我尝试将类选择器更改为其他值，但仍然无法实现任何克隆。
在浏览器控制台中，当您执行诸如 $(".dt-buttons") ...（或按钮周围的任何类）之类的操作时，您是否能够找到元素？测试您是否可以通过执行 $(".dt-buttons").hide(); 之类的操作来操作元素如果没有任何反应，请仔细检查元素以查看哪个选择器是正确的
文档找不到使用类的按钮。在$(document).ready(function() {...}) 中，我检查了按钮是否存在（使用.length），但找不到它。然后，我尝试将克隆放入$(window).load(function() {...})，它只有有时会找到按钮并将其正确添加到底部。其他时候，它根本找不到它。
克隆按钮的代码应该在表创建后立即进行，因为那是类存在的时候。
我试过了，但还是不行。将prependTo(...) 切换到insertBefore(...) 时，它的工作更加一致。感谢您的帮助！