Fix position after refreshing inside a table with multiples pages

  css, html, javascript, php

I asked 2 days ago how to fix position while refreshing the web page inside a scrolling table. And thanks ! That was so helpful ! Now, because my table has numerous lines, I choose to display it with multiples pages.

My code in index.php keeps the position inside my table but I don’t know how to keep the number of the web page. The refresh is caused by a button that updates a value of the line selected (in the column B), executing a php script validation.php . I think that the problem may be solved in validation.php in the location line, maybe with the number of the page stored in it. I don’t know. T-T

My index.php :


$database = "database";

include ''; 

if (isset($_GET["page"])) { $page  = $_GET["page"]; } else { $page=1; };
$start_from = ($page-1) * $results_per_page;

<!DOCTYPE html>

<html lang="en">


<body class="loggedin">

<center> <?php echo "Display all of the table"; ?> </center>
$sql = "SELECT * FROM " .$database. " ORDER BY ID ASC LIMIT $start_from, ".$results_per_page;
$query = $db->query($sql);

<script src=""></script>


document.addEventListener("DOMContentLoaded", function(event) {
  const scrollpos = localStorage.getItem('scrollpos');
  if (scrollpos) {
    const scroller = document.querySelector('.fixTableHead');
    if (scroller) {
        scroller.scrollTop = scrollpos;
window.onbeforeunload = function(e) {
  const scroller = document.querySelector('.fixTableHead');
  localStorage.setItem('scrollpos', scroller ? scroller.scrollTop : 0 );

.fixTableHead {
      overflow-y: auto;
      height: 600px;
    .fixTableHead thead th {
      position: sticky;
      top: 0;
    table {
      border-collapse: collapse;        
      width: 100%;
    td {
      padding: 8px 15px;
      border: 2px solid #FFFFFF;
    th {
      background: #D1CFCE;

<div class="fixTableHead">

<table class="table table-striped header-fixed">


    <th scope="col" style="text-align:center"><div class="cell-inner">id</div></th>
    <th scope="col" style="text-align:center"><div class="cell-inner">B</div></th>
    <th scope="col" style="text-align:center"><div class="cell-inner">Valider</div></th>



while($data = $query->fetch())

    <td scope="row"><div class="cell-inner"><?php echo $data['id']; ?></div></td> 
    <td><div class="cell-inner"><?php echo $data['B']; ?></div></td>
    <td><div class="cell-inner"><a href="validation.php?id=<?php echo $data['id']; ?>">Valider</a></div></td>
}//We close the while


</table> <!--End table-->

</div> <!--End fixTableHead--> 

//Multiples pages below
$sql = "SELECT COUNT(ID) AS total FROM ".$database;
$result = $db->query($sql);
$data = $result->fetch();
$total_pages = ceil($data["total"] / $results_per_page);
<div align="center"> 
for ($i=1; $i<=$total_pages; $i++) {  
            echo "<a href='index.php?page=".$i."'";
            if ($i==$page)  echo " class='curPage'";
            echo ">".$i."</a> "; 


$query=null;//close the connection


My validation.php script :

include '';
$id = $_GET['id'];
$edit = mysqli_query($db,"update database B='Validé' where id='$id'");
        echo mysqli_error();

Source: Ask PHP