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>';
}
?>

私が欲しいフォーマットはyahooメールと似たようなものです。yahoo メールは、クリックする代わりに、無限スクロールを使用してメールボックスをスクロールします。

4

0 に答える 0