dataTables导出按钮显示在自定义位置？

Posted 2023-05-07

【中文标题】dataTables导出按钮显示在自定义位置？

【英文标题】：dataTables export button display in custom position?

【发布时间】：2017-05-11 22:40:26

【问题描述】：

我想在自定义 div 中显示我的 dataTable 导出按钮。我该怎么做？

我当前的代码

这是默认代码，按钮单独显示在我的表格顶部。我该如何编辑？

  $(document).ready(function() 
        $('#example').DataTable( 
            dom: 'Bfrtip',
            buttons: [
                'excelhtml5',
                'csvHtml5',

            ]
         );

 );

我想显示的地方

            <select id="ex">
                <option>Export </option>
                <option id="csv" >CSV</option>
                <option id="xls" >XLS</option>
            </select>

这是小提琴 https://jsfiddle.net/qt9p2fwt/3/

【参考方案1】：

克隆按钮事件并销毁元素是相当头疼的事情。为什么不隐藏按钮面板并以编程方式单击按钮？可以这样自动化：

<select id="exportLink">
   <option>Export userlist</option>
   <option id="csv">Export as CSV</option>
   <option id="excel">Export as XLS</option>
   <option id="copy">Copy to clipboard</option>                                                
   <option id="pdf">Export as PDF</option>
</select>

在 dataTables 初始化选项中添加 initComplete 处理程序：

initComplete: function() 
  var $buttons = $('.dt-buttons').hide();
  $('#exportLink').on('change', function() 
    var btnClass = $(this).find(":selected")[0].id 
      ? '.buttons-' + $(this).find(":selected")[0].id 
      : null;
    if (btnClass) $buttons.find(btnClass).click(); 
  )
 

更新小提琴 -> https://jsfiddle.net/qt9p2fwt/17/

【讨论】：

太棒了！这就是我一直在寻找的。谢谢！

【参考方案2】：

我正在寻找类似的东西，即在下拉菜单中呈现按钮。最简单的解决方案是使用数据表的 collection button 选项。

 buttons: [
            
                extend: 'collection',
                text: 'Export',
                buttons: [
                    'copy',
                    'excel',
                    'csv',
                    'pdf',
                    'print'
                ]
            
        ]

参考：https://editor.datatables.net/examples/extensions/exportButtons.html

希望这可能对某人有所帮助。

谢谢！