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>

Answer 1

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>

Answer 2

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>