0

約 80 台の車の詳細を含む XML ファイル "data.xml" があります (車ごとに 4 つのサブノードがあります)。Jquery を介して解析している間、結果全体が 1 つのページに表示されるため、ページが非常に大きくなります。スクリプト コードは次のとおりです。

$(document).ready(function() {
    $('#car').click(function() {
        $.get('data.xml',function(data){
            $('#content').empty();
            $(data).find('car').each(function(){
                var $car = $(this);
                var html = '<div class="data">';                      
                html += '<b>' + $car.attr('company') + '</b>';
                html += '<div class="product">' + $car.find('product').text() + '</div>';
                html += '<div class="color">' + $car.find('color').text() + '</div>';
                html += '<div class="type">' + $car.find('type').text() + '</div>';
                $('#content').append(html);
            });                        
        });
        return false;
    });
});

私が必要としているのは、そのページに 8 台の車の詳細のみを表示し、「次のページに移動」をクリックして後続のページにさらに 8 台の詳細を表示することです。

4

2 に答える 2

0

最もクリーンなオプションは、8 台の車ごとに AJAX 呼び出しを実行することです。1 回の呼び出しで大量のデータをロードしたくないためです。

それにもかかわらず

  • XML (またはオブジェクト) を再利用できる場所に保存する
  • 最初に表示されるアイテムのインデックスを示すカウンター変数などを使用します
  • アイテム n から n+8 までを表示する更新メソッドを作成します (以下の URL を参照)。
  • この関数は #content DIV の内容をクリアする必要があります (append メソッドを使用しているため)

jQueryで最初の「n」項目を選択する

..本当にプロになりたいなら、knockoutjsで少し遊んでみてください。

于 2012-08-20T15:55:05.907 に答える
0

各ページに表示するレコード数を定義する変数と、現在表示しているページを保持する変数を設定できます。次に、jQuery の slice() メソッドを使用して、必要なレコードのみを選択します。次に、次のボタンがクリックされたら、ページ番号を増やして関数を再度呼び出します。毎回 XML のリロードを呼び出さないようにこれを最適化し、使用可能なレコードの総数を超えないようにチェックを追加する必要がありますが、全体像を把握する必要があります。

// init your variables
var currentPageIndex = 0;
var recordsPerPage = 8;

function showRecords() {
    // load your xml
    var currentRecordIndex = currentPageIndex * recordsPerPage;
    $(data).find('car').slice(currentRecordIndex, currentRecordIndex + recordsPerPage).each(function(){
        // do your processing 
    });                        
}

$("#next").click(function(e) {
    e.preventDefault();
    currentPageIndex++;
    showRecords();
});
于 2012-08-20T16:01:26.810 に答える