Question

背景我的页面里面有一个包含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>';
}
?>

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

返回页面时保持滚动位置

0 个答案: