0

背景： 我有一个包含 1000 多个数据的表格的页面。默认情况下，该表将首先显示 300 条数据。当用户滚动到表格底部时，有一个可以单击的按钮。每次单击该按钮时，都会将另外 300 个数据加载到表中。每一行都有一个按钮，可以单击以查看详细信息。用户可以点击按钮，返回上一页。

问题： 当用户点击按钮返回上一页时，数据又会从第一个开始显示。用户需要滚动查找之前点击过的数据的位置。

问题： 如何让浏览器在用户返回页面后保持滚动位置而不从头显示数据？

下面是我用来加载这些数据的脚本。

php 脚本（表从外部加载数据）

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

<body>
<div id="infinitescroller">
<table height="100%" width="100%" class="tableFormat" id="tbl">
    <tr>
        <th width="6%">No</th>
        <th>Customer</th>
        <th>I.C.</th>
        <?php
        if($_SESSION['login_level'] == 'admin')
        {
        ?>
        <th>Staff in-charge</th>
        <?php
        }
        ?>
        <th>Contact</th>
        <th>MemberCard No.</th>
        <th>Incoming Follow Up</th>
        <th></th>
    </tr>
</table>
</div>

<script>
$(document).ready(function(){
    $('#infinitescroller').scrollPagination({
        nop     : 300, // The number of posts per scroll to be loaded
        offset  : 0, // Initial offset, begins at 0 in this case
        error   : 'No More Posts!', // When the user reaches the end this is the message that is
                                    // displayed. You can change this if you want.
        delay   : 200, // When you scroll down the posts will load after a delayed amount of time.
                       // This is mainly for usability concerns. You can alter this as you see fit
        scroll  : true // The main bit, if set to false posts will not load as the user scrolls. 
                       // but will still load if the user clicks.
    });  
});
</script>
</body>
</html>

表格内容脚本

<?php
session_start();
include("../../include/dbconnection.php");

$offset = is_numeric($_POST['offset']) ? $_POST['offset'] : die();
$postnumbers = is_numeric($_POST['number']) ? $_POST['number'] : die();

$q = mysql_query("SELECT * FROM lassclient WHERE 1 ".$_SESSION['cust_search']." LIMIT ".$postnumbers." OFFSET ".$offset);
$counter = $offset;

while($get_q = mysql_fetch_array($q)) {
    $counter++;

    $sid = $get_q['salesid'];
    $pic = '';
    $called = '';
    $html = '';
    $staff_name = '';

    //get staff name
    $staff_q = mysql_query("select * from lassuser where userid = '$sid'");
    $get = mysql_fetch_array($staff_q);

    if($get_q['custpic'] != '')
    {
        $pic = '<a href="'.$get_q['custpic'].'" class="nm2" style="width:8em" target="_blank">
        <img src="'.$get_q['custpic'].'" width="20px" height="20px"/></a>';
    }

    if($get_q['called'] != '0000-00-00 00:00:00')
    {
        $called = $get_q['called']; 
    }

    if($_SESSION['login_level'] == 'admin')
    {
        $staff_name = "<td style='text-align:center; padding-left:0px'>".$get['fullname']."</td>";
        $html = "<a href=\"javascript:deleteConfirmation('".$get_q['clientname']."', '".$get_q['clientid']."')\"><img src=\"../../img/delete.png\" title=\"Delete\" width=\"18\"></a>";
    }   

    echo '<tr id="#'.$counter.'">
            <td style="text-align:center; padding-left:0px">'.$counter.'</td>
            <td>'.$get_q['clientname'].'</td>
            <td style="text-align:center; padding-left:0px">'.$get_q['ic'].'</td>'.$staff_name.'
            <td style="text-align:center; padding-left:0px">'.$get_q['hp'].'</td>
            <td style="text-align:center; padding-left:0px">'.$get_q['cardno'].'</td>
            <td style="text-align:center; padding-left:0px">'.$get_q['followupdate'].'</td>
            <td style="text-align:center; padding-left:0px">
                <a href="editCust.php?id='.$get_q['clientid'].'&r='.$counter.'" onclick="a('.$counter.')"><img src="../../img/edit.png" title="Edit" width="18"></a>                    
            </td>
          </tr>';
}
?>

我想要的格式有点类似于雅虎邮件。只是雅虎邮件使用无限滚动来滚动邮箱，而不是单击。

4

0 回答 0