Return to cursor position within table on page

Question

Hi I am struggling with this. I have tried many of the numerous solutions posted here and elsewhere but cannot seem to get the functionality I need.

I have a fairly simple dynamic webpage which displays tabulated results. I only have a limited amount of freedom over what I can change within the page itself. When one of the links within the table is selected a second page loads which makes the appropriate changes in the database then returns to the first page. I am looking to return to the same position not only on the page itself but also within the scrolling table.

<html>
<body>
<table>
 <tr>
  <th style="width: 50px;">heading 1</th>
  <th style="width: 50px;">heading 2</th>
  <th style="width: 50px;">heading 3</th>
  <th style="width: 50px;">heading 4</th>
  <th style="width: 50px;">heading 5</th>
 </tr>
</table>

<table style="overflow-y: scroll;" id="maintable">

<!-- while loop populates second table from db typically ~50 rows -->

 <tr>
  <td style="width: 50px;"><a href="changeYN.php?link=1">Yes</a></td>
  <td style="width: 50px;"><a href="changeYN.php?link=2">Yes</a></td>
  <td style="width: 50px;"><a href="changeYN.php?link=3">Yes</a></td>
  <td style="width: 50px;"><a href="changeYN.php?link=4">Yes</a></td>
  <td style="width: 50px;"><a href="changeYN.php?link=5">Yes</a></td>
 </tr>
<!-- end of while loop -->
</table>
</body>
</html>

I have tried to adapt the example given here Refresh Page and Keep Scroll Position but ended up with a huge mess. I also tried the second solution on this page Reload page in same position. Which does seem to affect the scroll position but doesn't seem to reflect the position in the table.

An modern alternative could be to use AJAX to submit the data without ever leaving the page. — Andy, Nov 27 '17 at 14:50
Ok trying to get my head around AJAX. So if I change then sort out changeYN.php to make the db query and redraw the table? — CurrySoup, Nov 27 '17 at 16:22

score 0 · Accepted Answer · answered Nov 30 '17 at 16:11

I was finally able to do this using JavaScript.

In this example I have given the table the id "maintable". Each link within the table now has the following:

<a href="example.php" onclick="tablepos(this.id);">

My tablepos function is as follows:

function tablepos(clicked_id) {
var elmnt = document.getElementById("maintable");
var ytpos = elmnt.scrollTop;
var xtpos = elmnt.scrollLeft;
var yppos = window.pageYOffset || document.documentElement.scrollTop;
var xppos = window.pageXOffset || document.documentElement.scrollLeft;
document.getElementById(clicked_id).href +="&xtpos=" + xtpos + "&ytpos=" + ytpos + "&xppos=" + xppos + "&yppos=" + yppos;
}

This appends the x and y scroll positions for the table (x/ytpos) and page (x/yppos) to the url which can then be picked up on the next page (or the same one if its self refering) with a

$ytpos=$_GET['ytpos'];

From there it can be handled as a normal php array.

To apply the positions to the page I have the following script after the table:

<script>
document.addEventListener("DOMContentLoaded", function(){
document.getElementById("maintable").scrollTop = <?php echo $ytpos; ?>;
document.getElementById("maintable").scrollLeft = <?php echo $xtpos; ?>;
document.documentElement.scrollTop = document.body.scrollTop = <?php echo $yppos; ?>;
document.documentElement.scrollLeft = document.body.scrollLeft = <?php echo $xppos; ?>;
});
</script>

This scrolls the table and page to the same positions.

Return to cursor position within table on page

1 Answers1