Question

我在页面上有一些自定义按钮，我想复制 DataTables 按钮的功能。我正在使用 DataTables ，因为我可以快速导出到Excel和PDF。我不需要此项目的 DataTables 的搜索，筛选或其他功能。因此，如果您有更好的建议，我愿意听。

我看过DataTables自定义按钮，（这就是我获得PRINT按钮的方式），但是我似乎找不到替代方法来使用我的按钮。

有人知道如何使用自定义按钮吗？

<div class="col-6">
      <div class="col d-print-none">
         <button type="button" class="btn btn-sm btn-primary float-right m-1"  onclick="window.print();"><i class="fas fa-print"></i> Print Report</button>
         <button type="button" class="btn btn-sm btn-success float-right m-1"  onclick=""><i class="fas fa-file-excel"></i> Export to Excel</button>
         <button type="button" class="btn btn-sm btn-danger float-right m-1"  onclick=""><i class="fas fa-file-pdf"></i> Download as PDF</button>
         <button type="button" class="btn btn-sm btn-secondary float-right m-1"  onclick=""><i class="fas fa-clipboard"></i> Copy to Clipboard</button>
      </div>
   </div>

DataTables代码。

$(document).ready(function() {
       $('#dataTableDetails').DataTable({
           "deferRender": true,
           "ordering": false,
           "paging": false,
           "info": false,
           "searching": false,
           dom: 'Bfrtip',
           buttons: [
               'copyHtml5',
               'excelHtml5',
               'csvHtml5',
               'pdfHtml5',
               {
                   text: 'PRINT',
                   action: function ( e, dt, node, config ) {
                      window.print();
                   }
               }
           ]
       });
   } );

Answer 1

尝试此操作，除了“打印”以外，不需要onclick事件。基本上调用默认按钮的类

   <div class="col-6">
      <div class="col d-print-none">
         <button type="button" class="btn btn-sm btn-primary float-right m-1" onclick="window.print();"><i class="fas fa-print"></i> Print Report</button>
         <button type="button" class="btn btn-sm btn-success buttons-excel float-right m-1"><i class="fas fa-file-excel"></i> Export to Excel</button>
         <button type="button" class="btn btn-sm btn-danger buttons-pdf float-right m-1"><i class="fas fa-file-pdf"></i> Download as PDF</button>
         <button type="button" class="btn btn-sm btn-secondary buttons-copy float-right m-1"><i class="fas fa-clipboard"></i> Copy to Clipboard</button>
      </div>
   </div>

您可以检查这些线程以获取更多信息； How to call Datatable csv button from custom button

DataTables - How can I use my own buttons for exporting?

Answer 2

DataTables插件具有一个扩展，可让您添加自定义按钮，您可以在以下位置找到此文档：https://datatables.net/extensions/buttons/custom。您可以将其与dom字段配合使用，以根据需要移动或设置默认和自定义按钮。有关此文档，请参见：https://datatables.net/reference/option/dom

Answer 3

首先，要删除这些按钮，您需要从buttons中排除其次，为了创建自定义按钮事件，您需要获取数据表实例，然后手动触发事件。

如何连接自定义按钮而不是DataTables按钮？

3 个答案: