Как подключить пользовательские кнопки вместо кнопок DataTables?

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

Попробуйте, не нужно никаких событий клика, кроме как для печати. В основном называют классы кнопок по умолчанию

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

Вы можете проверить эти темы для получения дополнительной информации; Как вызвать Datatable кнопку csv из пользовательской кнопки

DataTables - Как я могу использовать свои собственные кнопки для экспорта?

Answer 2

Во-первых, чтобы удалить эти кнопки, вам нужно исключить из buttons Во-вторых, чтобы создать пользовательские события кнопок, вам нужно получить экземпляр данных, а затем запустить событие вручную.

Answer 3

Плагин DataTables имеет расширение, которое позволяет вам добавлять пользовательские кнопки, документацию для этого можно найти здесь: https://datatables.net/extensions/buttons/custom. Вы можете использовать это по согласованию с полем dom для перемещения или установки значений по умолчанию и пользовательских кнопки как вам нужно. Документация для этого здесь: https://datatables.net/reference/option/dom