1

次のようなコードを使用して、JQuery Ajax を使用してサーバーからテーブルのコンテンツを取得します。

success: function(data)
{
    //once I get the data, remove the old content from table
    $('.tableBody').empty();

    // then repopulate the table
    $.each(data, function(key,val) {
        //process the data, add different icons, texts...,append it to my table
        showTable(key, val);
   });
}

これはうまくいきます。しかし、問題は、テーブルに多くの行があるため、再入力に約 300 ミリ秒かかる (empty()約 10 ミリ秒しかかからない) ため、短い間、テーブルが空白になることです。

"empty()"との間にアニメーションを追加"showTable()"して、空白の画面を回避し、シームレスに移行できる方法はありますか?

4

4 に答える 4

1

「データを処理し、さまざまなshowTable()アイコン、テキストを追加し、[your]テーブルに追加する」場合は、次のようになります。

$.each(data, function(key, val){
    $('.tableBody').append(key +' - '+ val);
});

最初に知っておくべきことは、複数のjQueryオブジェクトを作成して複数のDOMに追加するよりも、HTMLをできるだけ長く文字列に保持してから、それをjQueryオブジェクトに入れてDOMに追加する方が速いということです。時間も。したがって、次のようなことを行う方がよいでしょう。

var tableContents = '';
$.each(data, function(key,val){
    tableContents += key +' - '+ val; // generate whatever HTML you need
});
$('.tableBody').append(tableContents);

また、テーブルを再設定する直前にテーブルを空にすることができます。

var tableContents = '';
$.each(data, function(key,val){
    tableContents += key +' - '+ val; // generate whatever HTML you need
});
$('.tableBody')
    .empty()
    .append(tableContents);
于 2012-08-03T16:03:16.083 に答える
0

もし私があなたならslideUp、古いテーブルを（または、半透明の白いdivを上に配置して）新しいテーブルを画面外に準備してから、内容とslideDown（またはfadeOutこの方法を選択した場合は白いdiv）を入れ替えるだけです。

于 2012-08-03T16:01:33.943 に答える
0

AJAX コールバックでデータを受け取った後 (またはその前でも)、読み込みアニメーションを表示し、処理を行ってから、フォーム/テーブルを再度表示します。

基本的な例のようなもの..送信をクリックすると、読み込みアニメーションが表示され、フォームが非表示になります。自分の作業 (AJAX 要求) を実行してから、読み込み中のアニメーションを非表示にして、フォームを再度表示します。

<img class="loading" src="http://www.link-to-loading-anim.com/loading.gif"/>
    <form method="post">
    <input value="Click Me" type="submit"/>
</form>​

Javascript:

// On dom ready, hide our loading animation
$('img.loading').hide();

// on form submit, show the animation,
$('form').submit(function(e){
    e.preventDefault(); // we dont really need to submit the form!!

    // Show our loading animation
    $('img.loading').fadeIn();

    // Optional: Hide the form..
    $('form').hide();

    // Do something here.. (AJAX Request)
    // - Your success of AJAX request..

    // Hide the image loader on success.. (setTimeout used for demo purposes)
    setTimeout(hideImageLoader, 2000);

});

function hideImageLoader(){
    $('img.loading').fadeOut('slow', function(){
        $('form').show();
    }); 
}
​

これは、基本的な読み込みアニメーションの例のJSfiddleです。

于 2012-08-03T16:08:59.010 に答える
0

DOM にアタッチされていないテーブル要素を作成し、必要に応じて入力し、生成が完了したら既存のテーブルを置き換えるか、サーバーにこのテーブルのフォーマットを実行させることができます。テーブルを既にフォーマットされている ajax レスポンスに置き換えます。

于 2012-08-03T16:20:33.323 に答える