Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

print page count with total number of pages using css

Tags:

css

count

webpage

I have a table which populated with dynamic data and to handle that in printing i have applied some page breaks to it everything works fine but i need to show a pagination like "Page 1 of 3" and so on below every page while printing. I have tried with css but i can only print the current page number with it. is there any other way of achieving it ?? here is my code

   body {
        counter-reset: page;
    }
    .page-count:after {
        counter-increment: page;
        content: "Page " counter(page) " of " counter(pages);
    }
like image 802
yaser Avatar asked Jan 07 '16 11:01

yaser


People also ask

How do I put page numbers in CSS?

This is done by using the page counter in CSS, a pre-defined counter which represents the current page number. The page counter starts at 1 and increments automatically at each new page.

How do I count pages in HTML?

You can use the current page number counter as content in the HTML document. You can even go further. Say you want to start your page number at 10. You can then use the @page:first rule to reset the counter for the first page to value 9.

What is @media print?

Print media is one of the oldest and basic forms of mass communication. It includes newspapers, weeklies, magazines, monthlies and other forms of printed journals. A basic understanding of the print media is essential in the study of mass communication.


1 Answers

Did you try this:

@page {
   @bottom-right {
    content: counter(page) " of " counter(pages);
   }
}
like image 135
Edmar Miyake Avatar answered Sep 21 '22 06:09

Edmar Miyake