Populate a JSON into a table in real time with JQUERY

Question

I'm looking for a library which do this :

• Retrieve a JSON through an AJAX call
• Populate table with the JSON
• Update in real time the table with the JSON (call every x seconds) and only delete or hide the rows wich are deleted or insert the new rows.

/Editing after first answer

Ok I guess my first explanation was not good. Retrieving through jQuery a JSON and build a table is good, I could do that, but my request was more on the other part. I'm looking for a library to display the result in a special way. Let me explain.

Json request 1 send :
1;Tomato 2;Apple 3;Salad 4;Carot

Json request 2 send :
1;Tomato 3;Salad 4;Carot 5;Potatoes

I would like the second row disapear with a effect (fadeOut) and the rows below move Up. For the row 5, i just want a new row appears with a fade in.

Is that more clear?

Is there any library existing doing this?

I'm doing it in PHP, but i hope to write all this in JS.

The user could just look the table and see the new rows appearing and the old rows deleting.

Any ideas or am I supposed to write it from scratch?

Answer 1

You can get the json like this (use get or post, ill show post here):

function do_json_live(){
   $.post('url.php','somedata', function(returnJSON){
     alert(returnJSON); 
     //do something with the `returnJSON`
     setTimeout(do_json_live, 2000); //2000 ms = 2 seconds
   },'json');
}

Answer 2

If you want something friendly and full of various useful features, you can use jQuery plugin called DataTables.

It provides API allowing you to provide new data from the server on request: http://www.datatables.net/api

It works for simple implementations also, is pretty customizable, allows to change its outlook etc.

Hope this is useful.

Answer 3

Here is a really good article on different polling/comet techniques that you will want to look into. It breifly describes each and points out some pitfalls you might not think of.: http://query7.com/avoiding-long-polling. Also here is a jquery plugin for long polling: http://enfranchisedmind.com/blog/posts/jquery-periodicalupdater-ajax-polling/

Answer 4

Try Jquery Grid Plugin. You can retrieve JSON from server and build a grid on the client side. Take a look at the web site, there are some examples including php.