时间戳

首页 > 解决方案 > 在具有多个页面的表格内刷新后修复位置

javascript - 在具有多个页面的表格内刷新后修复位置

问题描述

我在index.php中的代码将位置保留在我的表格中，但我不知道如何保留网页的编号。刷新是由一个按钮引起的，该按钮更新所选行的值（在 B 列中），执行 php 脚本validation.php。我认为问题可能会在location行中的validation.php 中解决，可能是其中存储的页面编号。

我尝试在validation.php中重定向到我修改的当前页面，并在我的url中获得：http: //127.0.0.1/validation.php ?id=9007?page=10 用于修改第9007行但我被重定向到我的第 1 页！

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

<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']; ?>?page=<?php echo $page ?>">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>

我的validation.php 脚本：

<?php
include 'db.inc.php';
include "index.php";
$id = $_GET['id'];

$edit = mysqli_query($db,"update database B='Validé' where id='$id'");
    if($edit)
    {
        mysqli_close($db);     
        
        header("index.php?page=".$page);   
        exit;
    }
    else
    {
        echo mysqli_error();
    }
?>

标签： javascriptphphtmlcss

解决方案

我找到的解决方案：

验证.php：

 <?php

include 'db.inc.php';

$id = $_GET['id'];

$page = $_GET['page'];

$edit = mysqli_query($db,"update database set B='Validé' where id='$id'");
    
    if($edit)
    {
        mysqli_close($db);     
        header("location:index.php?page=".$page);  

        exit;
 
    }
    else
    {
        echo mysqli_error();
    }

?>

索引.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>

<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><a href="validation.php?id=<?php echo $data['id']; ?> &amp;page=<?php echo $page; ?>">Valider</a></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>

推荐阅读