从成功函数“实时”追加Ajax结果

Question

Question: Why don't elements appended to the DOM from my AJAX success function appear until after the success function has returned?

Context: I am using AJAX to get a JSON object with about 6000 inner objects that I want to use to populate a table. Unfortunately it takes about 10 seconds to create the table, so I'd like to give the user some visual feedback while it loads. I thought the user would be able to see table rows "live" as I call append but they don't load until success returns. When that didn't work, I tried updating the width of a Bootstrap progress bar, but the bar simply freezes during processing.

Goal: I would like the user to either see the table rows as they are appended or a progress bar at updates properly.

Code:

AJAX call:

$.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>

Answer 1

Try

$.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();
    }
});

Answer 2

You could try something like this:

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

and

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);
}

However, I really don't think you should be rendering 6000 rows in a table though. Try paginating your table using a library. DataTables has a section on how to paginate Bootstrap tables specifically.

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

Answer 3

Rather than thinking of it as pagination you could actually write a loop that fetches your records in smaller chunks; maybe try 100 records at a time. As you're appending your 100 records to the DOM, your loop keeps fetching and appending in the background. You would have to be careful to keep them in the order you want them since there is no guarantee data will be returned in the order requested. I would maybe try using .after() to append the data in the right order. With some tinkering I think this could produce a clean and efficient user experience.