2

私はこれに全く慣れていないので、十分な情報が得られない場合はご容赦ください。JSONとリストビューを使用して数千のレコードを表示している可能性がありますが、一度に表示する必要があるのは20のみで、下部に[もっと表示]ボタンがあります。これを可能にするために現在のJavaScriptをどのように変更するかがわかりません。誰かが私を正しい方向に向けてくれることを願っています。私はそれを機能させるためにこのコードを適用しようとしましたが、失敗しました：

http://jsfiddle.net/knuTW/2/

JSONデータを表示するための現在のJavaScript：

function getEmployeeList() {
$.getJSON(serviceURL + 'getmeals.php?calfrom='+ var1 + '&calto=' + var2, function(data) {
    $('#employeeList li').remove();
    employees = data.items;
    $.each(employees, function(index, employee) {
        $('#employeeList').append('<li><a href="employeedetails.html?id=' + employee.id + '">' +
            '<img src="http://www.restaurants.com/assets/img/logos/' + employee.restaurant + '.jpg"/>' +    
                '<h4>' + employee.meal_item + '</h4>' +
                '<p>Calories: ' + employee.calories + '</p>' +
                '<span class="ui-li-count">' + employee.protein + '</span></a></li>');

    });
    $('#employeeList').listview('refresh');
});
}

HTML：

<div id="employeeListPage" data-role="page" >

<div data-role="header" data-position="fixed">
    <h1>Restaurant Meals</h1>
</div>

<div data-role="content">
     <ul id="employeeList" data-role="listview" data-filter="true"></ul>
     <ul class="load-more"><a href="#">Load More</a></ul>
</div>

4

1 に答える 1

8

$.getJSONアイデアは、 ：limitと。に2つのパラメータを追加することoffsetです。

Limit必要な行数です。それで、20行としましょう。

Offset検索を開始する行番号です。したがって、0、20、40などです。

[もっと見る]をクリックする$.getJSONと、+20のオフセットで繰り返します。

バックエンドでは、SQLクエリは次のようになります。

$query = "SELECT * FROM table LIMIT $offset, $limit";

クエリが何も返さない場合は、ユーザーが最後に到達したことを意味します。

次に、[もっと見る]ボタンを非表示にできます。

もう1つの解決策は、すべての従業員を1人で取得し、$.GetJSONその結果を変数に格納することです。まず、最初の20人の従業員を表示します。ユーザーが[もっと見る]をクリックすると、次の20人の従業員が表示されます。アレイに従業員がいなくなったら、[もっと見る]ボタンを非表示にします。

このソリューションを使用すると、サーバーに対して複数の要求を行う必要がなくなります。

また、ページネーションを作成するためのプラグインを探すこともできます。

いくつかの例：

于 2012-09-16T17:12:48.650 に答える