Datatables plugin, print multiple tables on one page

Question

I distributed the data across multiple tables (code posted here) using data table plugin, which works wonderfully. Now, I would like to print the data on one page. Is there a way to print or export the data to one PDF but maintain the multiple data tables on screen?

Below code added a button on each table - and only exported the data for that table:

dataTableExample = $('#' + table).DataTable({
        "dom": 'Bfrtip',
        "buttons": ['pdfHtml5'],

The separate HTML file has all the required javascript libraries for the PDF button.

Answer 1

JSPDF library would help you for this, you could combine the tables' content and then generate the pdf file.

Some samples.

http://blog.appliedinformaticsinc.com/use-jspdf-for-exporting-data-html-as-pdf-in-5-easy-steps/

https://scotch.io/@nagasaiaytha/generate-pdf-from-html-using-jquery-and-jspdf

Answer 2

Instead of adding export to pdf button in each dataTable, you should add only one button and write code to combine and export table content to a single pdf file. I was able to achieve this by making use of exportData() method of DataTables library and pdfMake library.

Add a button to your page as given below:

<button id="ExportPdf" type="button">Export All</button>

write below function to trigger on its click:

$(document).ready(function(){
    $('#ExportPdf').click(function(){

            var config =    {
                                className:"buttons-pdf buttons-html5",
                                customize:null,
                                download:"download",
                                exportOptions:{},
                                extension:".pdf",
                                filename:"*",
                                footer:false,
                                header:true,
                                messageBottom:"*",
                                messagetop:"*",
                                namespace:".dt-button-2",
                                orientation:"portrait",
                                pageSize:"A4",
                                title:"*"
                                };

            var tables = ["table1","table2","table3"];
            var tablesConverted = {};
            for(var k=0;k<tables.length;k++)
            {
                var dt = $('#'+tables[k]).DataTable();
                var data = dt.buttons.exportData( config.exportOptions );
                var info = dt.buttons.exportInfo( config );

                var rows = [];

                    if ( config.header ) {
                        rows.push( $.map( data.header, function ( d ) {
                            return {
                                text: typeof d === 'string' ? d : d+'',
                                style: 'tableHeader'
                            };
                        } ) );
                    }

                    for ( var i=0, ien=data.body.length ; i<ien ; i++ ) {
                        rows.push( $.map( data.body[i], function ( d ) {
                            return {
                                text: typeof d === 'string' ? d : d+'',
                                style: i % 2 ? 'tableBodyEven' : 'tableBodyOdd'
                            };
                        } ) );
                    }

                    if ( config.footer && data.footer) {
                        rows.push( $.map( data.footer, function ( d ) {
                            return {
                                text: typeof d === 'string' ? d : d+'',
                                style: 'tableFooter'
                            };
                        } ) );
                    }

                    tablesConverted[tables[k]]=rows;
            }


                var doc = {
                    pageSize: config.pageSize,
                    pageOrientation: config.orientation,
                    content: [
                        "Data for "+tables[0],
                        {
                            table: {
                                headerRows: 1,
                                body: tablesConverted[tables[0]]
                            },
                            layout: 'noBorders'
                        },
                        " ",
                        "Data for "+tables[1],
                        " ",
                        {
                            table: {
                                headerRows: 1,
                                body: tablesConverted[tables[1]]
                            },
                            layout: 'noBorders'
                        },
                        " ",
                        "Data for "+tables[2],
                        " ",
                        {
                            table: {
                                headerRows: 1,
                                body: tablesConverted[tables[2]]
                            },
                            layout: 'noBorders'
                        },
                    ],
                    styles: {
                        tableHeader: {
                            bold: true,
                            fontSize: 11,
                            color: 'white',
                            fillColor: '#2d4154',
                            alignment: 'center'
                        },
                        tableBodyEven: {},
                        tableBodyOdd: {
                            fillColor: '#f3f3f3'
                        },
                        tableFooter: {
                            bold: true,
                            fontSize: 11,
                            color: 'white',
                            fillColor: '#2d4154'
                        },
                        title: {
                            alignment: 'center',
                            fontSize: 15
                        },
                        message: {}
                    },
                    defaultStyle: {
                        fontSize: 10
                    }
                };

                if ( info.messageTop ) {
                    doc.content.unshift( {
                        text: info.messageTop,
                        style: 'message',
                        margin: [ 0, 0, 0, 12 ]
                    } );
                }

                if ( info.messageBottom ) {
                    doc.content.push( {
                        text: info.messageBottom,
                        style: 'message',
                        margin: [ 0, 0, 0, 12 ]
                    } );
                }

                if ( info.title ) {
                    doc.content.unshift( {
                        text: info.title,
                        style: 'title',
                        margin: [ 0, 0, 0, 12 ]
                    } );
                }

                if ( config.customize ) {
                    config.customize( doc, config );
                }


        pdfMake.createPdf(doc).download('optionalName.pdf');
    });
});

Please note that you will need to refer pdfmake js and its supporting font js:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>

Please let me know if it works for you.