4

質問: AJAX 成功関数から DOM に追加された要素が、成功関数が戻るまで表示されないのはなぜですか?

コンテキスト: AJAX を使用して、約 6000 個の内部オブジェクトを含む JSON オブジェクトを取得しています。これを使用してテーブルにデータを入力します。残念ながら、テーブルを作成するのに約 10 秒かかるため、読み込み中に視覚的なフィードバックをユーザーに提供したいと思います。私が呼び出しappendたときに、ユーザーはテーブルの行を「ライブ」で見ることができると思いましたが、成功が戻るまでロードされません。それがうまくいかなかったとき、Bootstrap プログレス バーの幅を更新しようとしましたが、処理中にバーがフリーズするだけです。

目標: テーブルの行が追加されたときにユーザーに表示されるか、更新時に進行状況バーが適切に表示されるようにしたいと考えています。

コード：

AJAX 呼び出し:

$.ajax({
        type: "GET",
        url: myUrl,
        contentType: "application/json; charset=UTF-8",
        dataType: "json",
        success: function(results){
            for(var i in results) {
                $("#bar").css("width", s / results.length + "%");
                console.log(i);
                var t_cell = $('<td class="'+attrs[i]+'">');
                t_cell.css("background-color", results[i]["val0"]);
                t_cell.append($("<span class='val'>").text(results[i]["val1"]));
                t_cell.append($("<span class='raw'>").text(results[i]["val2"]]));
                t_row.append(t_cell);
                $("#review_table > tbody").append(t_row);
            }
            $('#progress').hide();
        }
    });

HTML:

<div id="progress" class="progress progress-striped active">
  <div id="bar" class="bar" style="width: 1%;"></div>
</div>
<div id='review_div'>
    <table class='table table-condensed' id='review_table'>
        <thead></thead>
        <tbody></tbody>
    </table>
</div>
4

3 に答える 3

1

試す

$.ajax({
    type : "GET",
    url : myUrl,
    contentType : "application/json; charset=UTF-8",
    dataType : "json",
    success : function(results) {

        var i = 0;

        function process() {
            while (i < results.length) {

                console.log(results[i])
                $("#bar").css("width", s / results.length + "%");
                console.log(i);
                var t_cell = $('<td class="' + attrs[i] + '">');
                t_cell.css("background-color", results[i]["val0"]);
                t_cell.append($("<span class='val'>").text(results[i]["val1"]));
                t_cell.append($("<span class='raw'>").text(results[i]["val2"]));
                t_row.append(t_cell);
                $("#review_table > tbody").append(t_row);

                i++;
                if (i % 25 == 0) {
                    setTimeout(process, 0);
                    break;
                }
            }
        }
        process();

        $('#progress').hide();
    }
});
于 2013-06-05T03:14:50.487 に答える
0

次のようなことを試すことができます：

for(var i in results) {
    createRow(i);
}

と

function createRow(i){
    var t_cell = $('<td class="'+attrs[i]+'">');
    t_cell.css("background-color", results[i]["val0"]);
    t_cell.append($("<span class='val'>").text(results[i]["val1"]));
    t_cell.append($("<span class='raw'>").text(results[i]["val2"]]));
    t_row.append(t_cell);
    $("#review_table > tbody").append(t_row);
}

ただし、テーブルに 6000 行をレンダリングする必要はないと思います。ライブラリを使用してテーブルのページネーションを試してください。DataTables には、Bootstrap テーブルを具体的にページ分割する方法に関するセクションがあります。

http://www.datatables.net/blog/Twitter_Bootstrap

于 2013-06-04T23:12:00.937 に答える
0

これをページネーションと考えるのではなく、レコードを小さなチャンクでフェッチするループを実際に書くことができます。一度に 100 レコードを試してみてください。100 個のレコードを DOM に追加していると、ループはバックグラウンドでフェッチと追加を続けます。要求された順序でデータが返される保証はないため、必要な順序でそれらを保持するように注意する必要があります。.after() を使用して、正しい順序でデータを追加してみてください。少し手を加えるだけで、クリーンで効率的なユーザー エクスペリエンスを実現できると思います。

于 2013-06-05T00:22:54.510 に答える