putTotalPages not working in jspdf-autotable header

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.