Jspdf-autotable: page numbering

[funflyer]

hi,

when producing a pdf with multiple tables and the footer as specified in the example, it seems as if the footer was added again with every table thats drawn. also the page numbering is incorrect.

var footer = function (data) {
                doc.setFontSize(10);
                doc.setFontStyle('normal');
                var str = "Page " + data.pageCount;
                str = str + " of " + totalPagesExp;
                doc.text(str, data.settings.margin.left, doc.internal.pageSize.height - 30);
                var today = new moment().format("YYYY-MM-DD");
                doc.text(today, right, doc.internal.pageSize.height - 30, 'right');
            };

doc.autoTable(columns, [], {
                        startY: doc.autoTableEndPosY(),
                        afterPageContent: footer,
                        headerStyles: {
                            fillColor: 255,
                            textColor: 0,
                            fontStyle: 'bold',
                            rowHeight: 20
                        }
                    });

page 1

other pages

last page (6)

[funflyer]

i realized, that the table.pageCount was reset to 1 at the creation at every new table:

var Table = function Table() {
        babelHelpers.classCallCheck(this, Table);

        this.height = 0;
        this.width = 0;
        this.contentWidth = 0;
        this.rows = [];
        this.columns = [];
        this.headerRow = null;
        this.settings = {};
        **this.pageCount = 1;**
    };

and then increased if that table was drawing on the next page

function addPage(jspdfAddPage) {
        settings.afterPageContent(hooksData());
        jspdfAddPage();
        table.pageCount++;
        cursor = { x: settings.margin.left, y: settings.margin.top };
        settings.beforePageContent(hooksData());
        if (settings.drawHeaderRow(table.headerRow, hooksData({ row: table.headerRow })) !== false) {
            printRow(table.headerRow, settings.drawHeaderCell);
        }
    }

i came up with a quick fix, by implementing a global page count. i recommend to implement it. nevertheless it wont work if youre adding new pages manually.

fix (plugin):

**var globalpagecount = 1**

    var Table = function Table() {
        babelHelpers.classCallCheck(this, Table);

        this.height = 0;
        this.width = 0;
        this.contentWidth = 0;
        this.rows = [];
        this.columns = [];
        this.headerRow = null;
        this.settings = {};
        **this.pageCount = globalpagecount;**
    };

function addPage(jspdfAddPage) {
        settings.afterPageContent(hooksData());
        jspdfAddPage();
        table.pageCount++;
        **globalpagecount++;**
        cursor = { x: settings.margin.left, y: settings.margin.top };
        settings.beforePageContent(hooksData());
        if (settings.drawHeaderRow(table.headerRow, hooksData({ row: table.headerRow })) !== false) {
            printRow(table.headerRow, settings.drawHeaderCell);
        }
    }

and in the app.js

var currentpage = 0;

            var footer = function (data) {

                if (currentpage < data.pageCount) {

                    doc.setFontSize(10);
                    doc.setFontStyle('normal');

                    var str = "Page " + data.pageCount;
                    str = str + " of " + totalPagesExp;


                    doc.text(str, data.settings.margin.left, doc.internal.pageSize.height - 30);
                    currentpage = data.pageCount;
                }


            };

[simonbengtsson]

I have seen people posting about this before so it is indeed confusing. Will think about how to change this in the next release. Will leave this issue open until something is done.

[funflyer]

ok i found a permanent fix. just call the footer function at every table generation and use the jspdf.numberofpages() function to print the actual page nr. no need to change the autotables api:

var currentpage = 0;

            var footer = function (data) {

                if (currentpage < doc.internal.getNumberOfPages()) {

                    doc.setFontSize(10);
                    doc.setFontStyle('normal');

                    var str = "Page " + doc.internal.getNumberOfPages();
                    str = str + " of " + totalPagesExp;
                    doc.text(str, data.settings.margin.left, doc.internal.pageSize.height - 30);
                    var today = new moment().format("YYYY-MM-DD");
                    doc.text(today, right, doc.internal.pageSize.height - 30, 'right');
                    currentpage = doc.internal.getNumberOfPages();
                }
            };

[simonbengtsson]

True!

[BenBabu]

I tried the above fix. But where can i get the value for "totalPagesExp"?. I couldn't find it any where.

[simonbengtsson]

The totalPagesExpression can be any string but i would recommend something like "{{total_pages}}".

[BenBabu]

Thats okay. But where can we get the total pages?. Is it in the pdfOptions object?

[kwalski]

for anyone who reaches here like me trying to figure out what is totalPagesExp it is a placeholder string replaced by jsPDF's putTotalPages(totalPagesExp).

I spent fair bit of time searching for clues in jsPDF-Autotable code and didn't find anything :smile:

[jwmann]

Also for reference, you don't really need a page counter variable.
This is my barebones version for anyone else's future reference.

const totalPagesExp = "{total_pages_count_string}";

doc.autoTable(columns, data, {
  addPageContent: data => {
    let footerStr = "Page " + doc.internal.getNumberOfPages();
    if (typeof doc.putTotalPages === 'function') {
      footerStr = footerStr + " of " + totalPagesExp;
    }
    doc.setFontSize(10);
    doc.text(footerStr, data.settings.margin.left, doc.internal.pageSize.height - 10);
  }
});

if (typeof doc.putTotalPages === 'function') {
  doc.putTotalPages(totalPagesExp);
}

[DCZ23]

Thanks a lot @jwmann , this solution worked great for me. My pages are being created dynamically, so I just added this to the "doc.autoTableSetDefaults" hook and it works like a charm now. I had the issue where it was saying "Page 1 of 2" on BOTH pages, instead of "Page 2 of 2" on the dynamically created additional page.

Just wanted to say thanks!

[Martwall]

Had a problem with this as well and I think that this solution could also work when dynamically generating pages.