I'm trying to use Autotable to display information for two tables side by side. When I don't have that many entries and the information only needs one page, it displays fine. However, when I have a lot of data and multiple pages, the second table doesn't start displaying until the first table has displayed most of its entries.
Here's a JsFiddle with sample data to illustrate the problem. I tried changing the y-position of the second table, but it just seems to move the data up on the page it's displaying and cuts off the top of the data rather than moving it onto the previous pages.
function generatePdf() {
header = ["Reason","Duration","Start time"];
content = [
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"]
];
var doc = new jsPDF('p', 'pt');
doc.autoTable(header, content, {
showHeader: 'firstPage',
styles: { fontSize: 10 },
avoidPageSplit: true,
margin: { right: 305 }
});
doc.autoTable(header, content, {
showHeader: 'firstPage',
styles: { fontSize: 10 },
avoidPageSplit: true,
margin: { left: 305 }
});
doc.save("test.pdf")
}
generatePdf();
I'm trying to use Autotable to display information for two tables side by side. When I don't have that many entries and the information only needs one page, it displays fine. However, when I have a lot of data and multiple pages, the second table doesn't start displaying until the first table has displayed most of its entries.
Here's a JsFiddle with sample data to illustrate the problem. I tried changing the y-position of the second table, but it just seems to move the data up on the page it's displaying and cuts off the top of the data rather than moving it onto the previous pages.
function generatePdf() {
header = ["Reason","Duration","Start time"];
content = [
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"],
["Analyzer blowback","10h15m","08:04"]
];
var doc = new jsPDF('p', 'pt');
doc.autoTable(header, content, {
showHeader: 'firstPage',
styles: { fontSize: 10 },
avoidPageSplit: true,
margin: { right: 305 }
});
doc.autoTable(header, content, {
showHeader: 'firstPage',
styles: { fontSize: 10 },
avoidPageSplit: true,
margin: { left: 305 }
});
doc.save("test.pdf")
}
generatePdf();
1 Answer
Reset to default 12You have to manually set the page between drawing the tables. I updated your fiddle with working code, but it basically can be done like this:
var startingPage = doc.internal.getCurrentPageInfo().pageNumber;
doc.autoTable({html: '#table', margin: {right: 305}});
doc.setPage(startingPage);
doc.autoTable({html: '#table', margin: {left: 305}});
Also checkout the multiple tables example to include horizontal tables that spans multiple tables.