putTotalPages not working in jspdf-autotable header - jspdf

Question

I am trying to add 'Page number x of y' to a PDF generated using jspdf and jspdf-autotable. I have used the code from the examples.js file on jspdf-autotable example site and also used the jspdf.debug.js file from this website which contains the putTotalPages function in.
The result I am getting on each page is 'Page 1 of {total_pages_count_string}' on first page and 'Page 2 of {total_pages_count_string}' on second page i.e. the total_pages_count_string does not appear to be updating correctly.
My entire code is as follows:
$('#print').click(function() {
$('#html-table table').remove();
var table = $("#amu-whiteboard").tabulator("getHtml");
$('#html-table').append(table);
$('#html-table>table').attr("id", "table");
$('#table th:not(:nth-child(1), :nth-child(2)), #table td:not(:nth-child(1), :nth-child(2))').remove();
var columns = ["Bed", "Name", "Diagnoses", "Jobs"];
var doc = new jsPDF('l', 'pt');
doc.setFont('Helvetica', 'normal');
doc.setTextColor(40);
var dateTime = moment().format('HH:mm on MMMM Do, YYYY');
var printedOn = "Printed at " + dateTime;
var totalPagesExp = "{total_pages_count_string}";
var pageContent = function(data) {
doc.setFontSize(14);
doc.text(21, 30, "AMU Handover Sheet");
doc.setFontSize(10);
doc.text(printedOn, doc.internal.pageSize.width / 2, 30, 'center');
var str = "Page " + data.pageCount;
if (typeof doc.putTotalPages === 'function') {
str = str + " of " + totalPagesExp;
}
doc.text(str, doc.internal.pageSize.width - 20, 30, 'right');
};
if (typeof doc.putTotalPages === 'function') {
doc.putTotalPages(totalPagesExp);
}
var elem = document.getElementById("table");
var res = doc.autoTableHtmlToJson(elem);
doc.autoTable(columns, res.data, {
addPageContent: pageContent,
theme: 'grid',
tableLineWidth: 0,
bodyStyles: {
halign: 'center',
valign: 'middle',
fillColor: 250,
lineWidth: 0.5,
lineColor: 180,
cellPadding: 6,
fontSize: 11
},
margin: {
horizontal: 20,
bottom: 40,
top: 40
},
drawRow: function(row, data) {
doc.setFontSize(12);
doc.setFontStyle('bold');
if (row.index === 0) {
doc.setTextColor(30);
doc.rect(data.settings.margin.left, row.y, data.table.width, 30, 'S');
doc.autoTableText("A BAY", data.settings.margin.left + 5, row.y + 16, {
halign: 'left',
valign: 'middle'
});
data.cursor.y += 30;
} else if (row.index === 6) {
doc.setTextColor(30);
doc.rect(data.settings.margin.left, row.y, data.table.width, 30, 'S');
doc.autoTableText("B BAY", data.settings.margin.left + 5, row.y + 16, {
halign: 'left',
valign: 'middle'
});
data.cursor.y += 30;
} else if (row.index === 17) {
doc.setTextColor(30);
doc.rect(data.settings.margin.left, row.y, data.table.width, 30, 'S');
doc.autoTableText("C BAY", data.settings.margin.left + 5, row.y + 16, {
halign: 'left',
valign: 'middle'
});
data.cursor.y += 30;
} else if (row.index === 28) {
doc.setTextColor(30);
doc.rect(data.settings.margin.left, row.y, data.table.width, 30, 'S');
doc.autoTableText("SIDE ROOMS", data.settings.margin.left + 5, row.y + 16, {
halign: 'left',
valign: 'middle'
});
data.cursor.y += 30;
} else if (row.index === 30) {
doc.setTextColor(30);
doc.rect(data.settings.margin.left, row.y, data.table.width, 30, 'S');
doc.autoTableText("FAIRFAX", data.settings.margin.left + 5, row.y + 16, {
halign: 'left',
valign: 'middle'
});
data.cursor.y += 30;
}
},
headerStyles: {
fillColor: 120,
halign: 'center',
valign: 'middle',
fontSize: 12,
},
alternateRowStyles: {
fillColor: 255
},
columnStyles: {
0: {
columnWidth: 40
},
1: {
columnWidth: 180,
halign: 'left',
},
2: {
columnWidth: 240
},
}
});
doc.save("table.pdf");
})
Can anybody suggest where I am going wrong with this?

Answer 1

I think putTotalPages() has to be called after autotable.