0

json レコードを検索し、すべてのレコードを 1 つずつ表示する作業コードがあります。検索語に基づいてレコードを表示したい、

作業コードは次のとおりです。

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery PHP Json Response</title>
<style type="text/css">
div
{
text-align:center;
padding:10px;
}

#msg {
width: 500px;
margin: 0px auto;
}
.members {
width: 500px ;
background-color: beige;
}
</style>
</head>
<body>

<input type="text" id="search-json-input" />
<input type="button" id="search-json-submit" value="search" />
<br/>
<br/>

<input type="button" name="next" id="next" value="NEXT" />
<br/>
<input type="button" name="previous" id="previous" value="PREV" />
<br/>
<div id="msg">
    <table id="userdata" border="1">
        <thead>
            <th>Email</th>
            <th>Sex</th>
            <th>Location</th>
            <th>Picture</th>
            <th>audio</th>
            <th>video</th>
        </thead>
        <tbody></tbody>
    </table>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type="text/javascript">

var users = [];
var idx = 0;
var renderRow = function (idx) {
    if (idx < 0) idx = 0;
    if (idx > (users.length - 1)) idx = (users.length - 1);
    var user = users[idx];
    var tblRow = "<tr>" + "<td>" + user.email + "</td>" + "<td>" + user.sex + "</td>" + "<td>" + user.location + "</td>" + "<td>" + "<img src=" + user.image + ">" + "</td>" + "<td>" + "<audio src=" + user.video + " controls>" + "</td>" + "<td>" + "<video src=" + user.video + " controls>" + "</td>" + "</tr>";
    $('#userdata tbody').html(tblRow);
};
var url = "json.php";
$.getJSON(url, function (data) {
    users = data.members;
    renderRow(idx);
    $('#next').click(function() {
        idx++;
        renderRow(idx);
    });
    $('#previous').click(function() {
        idx--;
        renderRow(idx);
    });
});

</script>
</body>
</html>

json.php の結果はここで見ることができます: http://sco7.com/components/phonegap/json.php

4

1 に答える 1

0
  • JSON 応答を変数として何かに添付して、後で参照できるようにします。
    • 1000 個を超える項目がある場合、このアプローチはあまりうまく機能しません。大きなデータセットを返すには遅すぎるためです。
  • 現在のインデックス変数 (int) を作成します。
  • 応答ハンドラのループを削除します (つまり、 each() への呼び出し)。
  • ドキュメントを更新して、「左ボタン」、「右ボタン」、および 0 番目の項目を追加します。
    • ボタンはサーバーに何も送信してはなりません。
    • 追加されたアイテムは、現在持っているものと同じフォーマットになっている可能性があります

  • 作成されたボタンには、次の onclick ハンドラーがあります。

    • 変更されたインデックスが有効になるまで繰り返す

      • 左の場合、デクリメントされた場合、インデックスが有効かどうかを確認してからデクリメントします。
      • 右の場合、インクリメントされた場合、インデックスが有効かどうかを確認してからインクリメントします。
      • データの検証 (正規表現) を最新のものとして行います。
      • データが正しくない場合は、インデックスを再度変更します。

    • 現在表示されているアイテムのテキストを削除し、更新されたインデックスにアイテムを追加します。

于 2013-08-03T11:16:59.110 に答える