How to export two DataTables in just one PDF file

问题:

I'm currently using DataTables to draw tables in a webpage. I have a table which is not hidden and users can view it without problems. On the other hand, I have a hidden table which has to be exported with the not hidden table at same time.

I want to be able to click on "Export PDF" in the not hidden table and generate a PDF file with both tables, the hidden and the not hidden table.

Could someone help me? I'm a little confused about how to do that.

回答1:

I havn't tried this but you could attempt to simply trigger the second button from the first.

$("#foo .buttons-pdf").on("click", function() {
  $("#bar .buttons-pdf").trigger("click");
});

The second table will still need to be available in the DOM.

回答2:

If you have identical tables it is dead easy. Simply have a third (or fourth etc) hidden table you only use for export purposes. When your "PDF" button is clicked follow these steps :

1. Beforehand, set the *_wrapper container to display: none; so the user never sees flicker or garbage on the screen
2. Use the API to collect data from all tables and merge them
3. Initialise the hidden export table and use the merged data as data source
4. Trigger the PDF export programmatically
5. Clean up the hidden export table so no conflicts occurs when the user tries to export a second time

===

$('#example').DataTable({ });
$('#example2').DataTable({ });

$('button').on('click', function() {
  var data = $('#example').DataTable().table().data();
  $.merge( data, $('#example2').DataTable().table().data() );
  $('#export-table').DataTable({
    dom: 'B',
    data: data,
    buttons: [{
      extend: 'pdfHtml5'
    }],
    drawCallback: function() {
      $('#export-table_wrapper .buttons-pdf').click()
       setTimeout(function() {
          $('#export-table').DataTable().destroy(false);
       }, 200)
    }
  })
})  

Here is a demo with one visible table, one hidden table and a third table which takes care of the export -> https://jsfiddle.net/u20x4be0/