PDF'ing multiple tables

PDF'ing multiple tables

rolevinerolevine Posts: 1Questions: 1Answers: 0

Link to test case:

Debugger code (debug.datatables.net):

Error messages shown:

Description of problem:
I have multiple dataTables on one page and would like to use a single PDF button to export all the tables to a single document. I thought that extending the pdf button would work, however, I'm only getting the first page exported (the first page is the first table in the page). I can see from my console.log statements that the PDF is being generated before it loops over all the tables. I have the code set up as an async function and the html2canvas in the loop uses await, but, alas there is no waiting. Thoughts?

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('table').DataTable( {
        dom: 'Bfrtip',
        buttons: [
                extend: 'pdfHtml5',
                customize: async function ( doc ) {
                    const options = {
                      pagesplit: true
                    const ids = document.querySelectorAll('table');
                    const length = ids.length;

                    for (let i = 0; i < length; i++) { 
                        const page = document.getElementById(ids[i].id);
                        /* execute this function then exit loop */
                        await html2canvas(page, options).then(function (canvas) { 
                                image: canvas.toDataURL('image/png'),
                                margin: [0, 0, 0, 12]
    } );
} );


  • colincolin Posts: 11,300Questions: 0Answers: 1,931

    Yep, because you're getting the table entries from the DOM, only the first page will be present - all other pages won't be in the DOM. To access them all, you would need to go through the DataTables API. Use rows() to get all the rows in the table.


Sign In or Register to comment.