JQuery Datatables: копировать в буфер обмена с помощью внешней кнопки

Question

Я хотел скопировать содержимое таблиц данных в буфер обмена с помощью кнопки, которая не содержится в таблицах данных.

Сделать это с помощью кнопки внутри таблиц данных очень легко с опцией buttons: ['copyHtml5'].

Можно ли связать метод onclick () кнопки html, чтобы сделать это?

Например, я сделал то же самое с поисковым фильтром с этим кодом, который связывает внешний ввод html (myFilter) с поиском Datatablesдействие:

$("#myFilter").on("keyup", function() {
    dataTable.search(this.value).draw();
}); 

Answer 1

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

var table=  $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [           
          
            'copy'
       
             
        ]
    } );
    
    $("#copycustomButton").on("click", function() {
    table.button( '.buttons-copy' ).trigger();
});

.buttons-copy{
  display:none !important
}

<script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
      <script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
      <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
   
      <script type="text/javascript" src="//cdn.datatables.net/buttons/1.1.2/js/buttons.html5.min.js"></script>
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css">
    
<button id="copycustomButton">
copy
</button>
<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>

    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>

    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>

    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>

    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Herrod Chandler</td>
      <td>Sales Assistant</td>
      <td>San Francisco</td>
    </tr>
    <tr>
      <td>Rhona Davidson</td>
      <td>Integration Specialist</td>
      <td>Tokyo</td>
    </tr>
    <tr>
      <td>Colleen Hurst</td>
      <td>Javascript Developer</td>
      <td>San Francisco</td>
    </tr>

    <tr>
      <td>Jennifer Chang</td>
      <td>Regional Director</td>
      <td>Singapore</td>
    </tr>
    <tr>
      <td>Donna Snider</td>
      <td>Customer Support</td>
      <td>New York</td>
    </tr>
  </tbody>
</table>