javascript - Sorting, updating and presenting async response data in a HTML table -

i've got app issues multiple async calls backend; each async response array of {date, string} values.

i'd present responses of each of these async calls arrive, in sorted table in web browser (ordered date). subsequent responses other async calls arrive, want sorted table updated in real time.

for example, first async response might [{'2012-02-10', 'abc'}, {'2012-01-19', 'def'}, {'2012-03-01', 'ghi'}], , i'd want see <table><tr><td>2012-01-19</td><td>def</td></tr><tr><td>2012-02-10</td><td>abc</td></tr><tr><td>2012-03-01</td><td>ghi</td></tr></table> rendered in browser immediately.

if second async response of [{'2011-12-09', 'jkl'}] appears time later, want html changed <table><tr><td>2011-12-09</td><td>jkl</td></tr><tr><td>2012-01-19</td><td>def</td></tr><tr><td>2012-02-10</td><td>abc</td></tr><tr><td>2012-03-01</td><td>ghi</td></tr></table>

the effect i'm after have table of results in browser, being progressively updated sorted data various async responses turn up. table grow in size each new async response received, new {date, string} elements appear in correct date sequence data that's being displayed.

this isn't unique scenario, i'm guessing there's way of doing considered 'best practice' - possibly using jquery ui. if so, please point me towards 'howto' or example? - haven't been able find suitable using google.

thanks in advance

you can start this

<script> function my_func() { var myarray = ["2012-02-10, abc", "2012-01-19, def", "2012-03-01, ghi"]; var table_content = ''; var temp_arr = ''; for(var in myarray) {     myarray.sort();     temp_arr = myarray[i].split(',');     table_content = table_content + '<tr><td>'+temp_arr[1]+'</td><td>'+temp_arr[0]+'</td></tr>' } table_content = '<table>'+table_content+'</table>' document.getelementbyid('mytable').innerhtml = table_content; } </script>  <input type="button" value="clickme" onclick="my_func();"/> <div id="mytable"></div> 

in place of calling function on button click can run function on sucessful call of function , fill html.

i hope helps