How to add page numbers when printing the document using CSS or javascript/jquery

Question

I want to add a page numbers when printing the document and I did search on it and I found that we can achieve this using CSS. For this we need to use @page css property. So I have added the following code

@page {
  /*margin-top: 15mm;*/
  margin-bottom: 25mm;
  margin-left: 30mm;
  margin-right: 30mm;

  @bottom-center {
  counter-increment: page;
  counter-reset: page 1;
      content: "page " counter(page);
  }
}

But I am facing the one problem, the above mentioned properties all are applied but my page numbers are not displaying. I don't know why its happening.

Can anyone facing the same issue? or anyone know the solution,please help out to fix this issue.

might be helpful for you, http://stackoverflow.com/questions/20050939/print-page-numbers-on-pages-when-printing-html — Kheema Pandey, Apr 02 '15 at 12:43
Actually I looked into it and just pasted the code but this is work only if you have static id or class of element, in my case I have dynamic data and I don't know what elements are coming — Deepti Kakade, Apr 02 '15 at 12:56
you can use `ID` see the example. http://jsbin.com/kewepowedu/1/edit — Kheema Pandey, Apr 02 '15 at 13:03
let me know if the solution doesn't work for you. or you find any better solution. — Kheema Pandey, Apr 02 '15 at 13:13

score 0 · Answer 1 · answered Feb 22 '16 at 05:08

0

You may try this,

content: counter(page)

@page {
    @bottom-left {
        content: counter(page);
     }
 }

answered Feb 22 '16 at 05:08

Mohideen bin Mohammed

18,813
10
112
118

How to add page numbers when printing the document using CSS or javascript/jquery

1 Answers1