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

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>

这里是小提琴 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(); 
  })
} 

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