CODEWITHSUNDEEP
javascriptjquerydatatables
toffler
toffler

Reputation: 1233

jQuery Datatable extend print button to work for multiple tables on same page

I've 1 to n tables in a HTML page and want to print all of them in one flow. jQuery Datatables delivers a "build-in" print button but this only works for the assigned table. However, there must be some logic behind to collect all the data from the rows and print them.

Is it possible to extend this logic to work for several tables on the same page?

I've created this fiddle as a playground.

This is the build in print button logic:

$('#example').DataTable( {
    dom: 'Bfrtip',
    buttons: [
        'print'
    ]
} );

Those 2 minified js are needed to make the button work: https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js

Upvotes: 0

Views: 4116

Answers (1)

OfirD
OfirD

Reputation: 10510

Print Multiple Tables in Multiple Pages

You can make the "Print All" button call a function that will call each table's "Print" button.

So, using your fiddle elemets' ids, define printAll:

function printAll() {
    $('#example_wrapper .buttons-print').click();   
    $('#example2_wrapper .buttons-print').click();
}

... which will be called on-click:

$('#print-all').click(printAll);

Full fiddle is here.

Do note, however, that this will open two different pages for print.

Print Multiple Tables in Single Page

If you want the print to happen in a single page, you'll need to use some customization, by following these steps:

  1. Use the customize option for each of your "Print" buttons.
  2. On each of them, take the print-view table html from the opened print window into some global variable, and immediately close the print window.
  3. On a printAll function:
    a. Call both button's click handlers to make them append their html to the global variable
    b. Then, open a new window of your own with the aggregated htmls, and don't forget to add the DataTables CSS.
    c. Wait shortly to let the opened window finish loading, and then call print.

Full fiddle is here, but for completeness I'll put the final js code in the following snippet:

  • Note: you can customize the print page anyway you like, just add html elements into the print window body. Please advise the links attached below.

var all = '';
$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            {
              extend: 'print',
                customize: function (win) {
                all += $(win.document.body).find('table')[0].outerHTML;
                win.close();
                },
            }
        ]
    } );
  $('#example2').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            {
              extend: 'print',
                customize: function (win) {
                all += $(win.document.body).find('table')[0].outerHTML;
                win.close();
                },
            }
        ]
    } );
    $('#print-all').click(printAll);
});

function printAll() {
    $('#example_wrapper .buttons-print').click();   
  $('#example2_wrapper .buttons-print').click();
  var win = window.open("about:blank", "Print View");
  win.document.write(
    '<html>\
        <head>\
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">\
            </head>\
      <body></body>\
      </html>');
  win.document.close();
  $(win.document.body).append(all);
  setTimeout(function () { win.print(); }, 1000);
}

Further reading:

  1. How to get all stylesheets into the new window.
  2. How to merge both tables into a single one for printing
  3. DataTables' print documentation

Upvotes: 1

Related Questions