How to Print Page Number in Print Preview in html page contains table

Question

here i have some of the tables , i need to print this html page, with page number,the table content may differ dynamically, i unable to print the page number dynamically ,I have tried so many ways but i unable to find solution yet. I need to Print page Number like "Page no 2/6"

Below is my html sample

<style>
.page { 
page-break-before:always;
}
@page {
size: A4;
 margin: 0;
}
@media print {
 @page {
  size: A4;
  margin: 0;
}


}
</style>
<table  class='page'>
 <tr><td></td></tr>....
 </table>
 <table  class='page'>
 <tr><td></td></tr>....
 </table>
 <table  class='page'>
 <tr><td></td></tr>....
 </table>
 <table  class='page'>
 <tr><td></td></tr>....
 </table >
<script>
window.print();
</script>

Does this answer your question? [Print page numbers on pages when printing html](https://stackoverflow.com/questions/20050939/print-page-numbers-on-pages-when-printing-html) — FluffyKitten, Aug 12 '20 at 04:19
@FluffyKitten Here the Mater is i have table with dynamic content — Brindha Baskaran, Aug 12 '20 at 04:23
have you tried https://www.pagedjs.org ? it's a polyfill tha might help you — DanielMescoloto, Aug 27 '20 at 05:14
Have you looked at any of the answers under [this SO question](https://stackoverflow.com/questions/56402991/how-to-use-css-counter-increment-for-dynamic-page-numbers/) — Chiel, Aug 27 '20 at 22:34
Which language or tool do you use? (to fill tables dynamically). Many tables for one page and never one table for many pages? — black blue, Aug 29 '20 at 22:24

score 4 · Answer 1 · answered Aug 30 '20 at 07:21

If you want you can use counter

body{
  counter-reset: page;
}

.page-counter:after {
    counter-increment: page;
    content: "Page " counter(page);
}

<div class="page">
  fake content
  <div class="page-counter"></div>
</div>

<div class="page">
  fake content
  <div class="page-counter"></div>
</div>

If you want to use " page 1 / 10" you can create a div with spans inside of it equal to the number pages you have

body{
  counter-reset: page;
}

#total-counter{
    counter-reset: totalPages;
}
#total-counter span{
  counter-increment: totalPages;
}

.page-counter:after {
    counter-increment: page;
    content: "Page " counter(page) " / " counter(totalPages);
}

<div id="total-counter">
  <span></span>
  <span></span>
</div>

<div class="page">
  fake content
  <div class="page-counter"></div>
</div>

<div class="page">
  fake content
  <div class="page-counter"></div>
</div>

Your code is working very well but I want derivate the question. What if we have a very long (more than 10 pages) ONE `div`? Is it possible to add same page numbers for this case? — Vito Andolini, Jan 30 '21 at 22:12
@izik the code that you use to print "page 1 / 10" consider hardcode, how do we know dynamically the number of "page" class on that html? — hendra, Jul 07 '22 at 09:20

score 0 · Answer 2 · answered Jul 07 '22 at 10:49

the enhance version from @izik

If you want to use " page 1 / 10" dynamically

make sure all div tag inside this div total-counter
you need to count the total page using javascript
upon click print button, javascript will pass back the totalPage into css style variable --my-var
the css .page-counter::after will run the counter and display the totalPage using this code :

counter-reset: myvar var(--my-var);
content: "Page " counter(page) " / " counter(myvar);

function printMe(){
  var totalPage = document.querySelectorAll('.page').length;
  var elem = document.getElementById("total-counter");
  var jsVar = elem.style.getPropertyValue("--my-var");
  elem.style.setProperty("--my-var", totalPage);
  console.log('totalPage '+totalPage);
  window.print();
}

body{
  counter-reset: page;
}

#total-counter{
    counter-reset: totalPages;
}
#total-counter {
  counter-increment: var(--my-var);
}
.page-counter{
  margin-left:var(--my-var)px;
  --myvar : variable var(--my-var);
}
.page-counter::after {
margin-right:var(--my-var)px;
    counter-increment: page;
    counter-reset: myvar var(--my-var);
    content: "Page " counter(page) " / " counter(myvar);
}

@media print{
  .page-counter{
    page-break-after: always;
    text-align: center;
    bottom: 0;
  }
}

@media screen{
  .page-counter{
    display:none;
  }
}

<button id="printPageButton" onclick="printMe()">print</button>
<div id="total-counter" style="--my-var:0">
  <div class="page">
    fake content 1

    <div class="page-counter"></div>
    </div>


  <div class="page">
    fake content 2
    <div class="page-counter"></div>
  </div>

  <div class="page">
    fake content 3
    <div class="page-counter"></div>
  </div>
  
  <div class="page">
    fake content 4
    <div class="page-counter"></div>
  </div>

</div>

How to Print Page Number in Print Preview in html page contains table

2 Answers2

Linked