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.