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 :

<?php


$database = "database";

include 'db.inc.php'; 

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


<!DOCTYPE html>

<html lang="en">

<head>
</head>

<body class="loggedin">

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<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 );
};
  
    
</script>

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


<div class="fixTableHead">

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


<thead>
  <tr>

    <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>

  </tr> 
</thead>

<tbody>

<?php
while($data = $query->fetch())
{?>

<tr>
    <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>
</tr>
  
<?php
}//We close the while
?>

</tbody>

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

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

<?php
//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"> 
<?php  
for ($i=1; $i<=$total_pages; $i++) {  
            echo "<a href='index.php?page=".$i."'";
            if ($i==$page)  echo " class='curPage'";
            echo ">".$i."</a> "; 
}; 
?>
</div>
</center>



</body>

<?php 
$query=null;//close the connection
?>

</html>

My validation.php script :

<?php
include 'db.inc.php';
$id = $_GET['id'];
$edit = mysqli_query($db,"update database B='Validé' where id='$id'");
    if($edit)
    {
        mysqli_close($db);     
        header("location:index.php");
        exit;
    }
    else
    {
        echo mysqli_error();
    }
?>

Source: Ask PHP

LEAVE A COMMENT