Print Page number on each page like 1 of 4 print

Question

0.00/5 (No votes)

See more:

I am Printing dynamically generated Html table using window.Print() "JavaScript" function. To print header and footer on each page when print I used bellow mention style.

It's working properly, now I need to put page number in footer row like page 1 of 4.

Internet Explorer >> File >> Page Setup >> It shows header and footer I want change header value to footer pragmatically.

Internet Explorer >> File >> Page Setup >> Header/footer via css

I want to stop the header from being displayed when you print something and footer will show page number out in Internet Explorer you can simply go into the Page Setup and remove the "&w&bPage &p of &P" for the header and "&u&b&d" for the footer, which show the page numbers and URL.

However, I am developing a web application for a number of users and they will not want to have this URL and the page number displayed. Instead of going around to each PC and change the page setup settings in their internet explorer - is it possible to modify the header and footer values with JavaScript code in the web page that the user will want to print. And if so how is this achieved. If there is a previous discussion on this please point me to the thread.

Please help, how can I set page number?

CSS

<style type="text/css">

         @media print {
                         thead { display: table-header-group; }
                         tfoot { display: table-footer-group;
                                }
                     }
         @media screen {
             thead { display: block; }
             tfoot { display: block;
                   }
         }
     </style>

I tried this but its not working

CSS

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

}

Posted 13-Sep-11 0:33am

to.areeb

Updated 17-Sep-18 1:16am

v8

Add a Solution

Comments

demouser743 13-Sep-11 10:52am

If you are working on reports the you can do it using "ReportInfo" control and set the "FormatString" property.

to.areeb 14-Sep-11 2:40am

I am not working on report. just printing html table using window.print()

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Member 13723018 · Answer 1 · 2018-04-18T23:39:00

Solution 1

hello do you get the answer if you get that please update the answer

Posted 18-Apr-18 23:39pm

Member 13723018

Comments

Member 11509746 17-Sep-18 7:17am

<!--This works only in firefox browser still i'm looking for solution to other browsers.

.footer_info_Mh:after{
counter-increment: page;
content:"Page " counter(page);
text-align: center; }

Member 11509746 · Answer 2 · 2018-09-17T01:17:00

Solution 2

HTML

<!--This works only in firefox browser still i'm looking for solution to other browsers.
<div class="footer_info_Mh" style="width: 100%"></div>
<style>

</style>
.footer_info_Mh:after{
counter-increment: page;
content:"Page " counter(page); 
text-align: center;  }

Posted 17-Sep-18 1:17am

Member 11509746