jquery - 数据表导出按钮显示在自定义位置？

Question

我想在自定义 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>

这是 fiddle https://jsfiddle.net/qt9p2fwt/3/

Answer 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>

将 initComplete 处理程序添加到 dataTables 初始化选项:

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(); 
  })
} 

更新了 fiddle -> https://jsfiddle.net/qt9p2fwt/17/