Add live Ajax results from success function

Question

Question: Why do elements added to the DOM from my AJAX success function appear until the return function returns?

Context: I use AJAX to get a JSON object with about 6,000 internal objects that I want to use to populate the table. Unfortunately, it takes about 10 seconds to create a table, so I would like to give the user visual feedback when loading. I thought the user would be able to see the rows of the table “live” as I call append , but they do not load until success returns. When this did not work, I tried updating the width of the Bootstrap progress bar, but the panel just freezes during processing.

Purpose: I would like the user to either see the rows of the table as they are added, or the progress bar with the correct updates.

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 can 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 show 6,000 rows in a table. Try breaking pages into a table using a library. There is a section on DataTables on how to specifically partition Bootstrap tables.

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

Answer 3

Instead of thinking of it as pagination, you could write a loop that extracts your entries into smaller pieces; maybe try 100 records at a time. When you add your 100 entries to the DOM, your loop continues to receive and add in the background. You must be careful to keep them in the order you want them, since there is no warranty information in the order request. Maybe I'll try using .after () to add the data in the correct order. With some bullying, I think it can provide a clean and efficient user interface.