Populate a JSON into a table in real time with JQUERY

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 th开发者_运维知识库e 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?

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

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.

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/

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.

First I would read this, but the code is actually really simple.

On your front end, you'd have your table

<table id="myTable"></table>

Then you'd make your AJAX post within JQuery

$.ajax({
  url: "yourphpfile",
  data: <data you want your php file to read>
  success: function(data){
    $('#myTable').html(data);
  }
});

Your method in php would take in your posted data, it would create an HTML string of a table element, and then you'd set your table's innerHTML on the front end with .html() built into JQuery -- that way you never have to worry about showing/hiding, everytime you post, your given the table itself, so you just display exactly that, you can handle all the fancy stuff server side.

You could use the awesome jqGrid plugin.

To do the autorefresh, you should do this:

setInterval(function(){
  $("#grid1").trigger("reloadGrid");
}, 10000);

Hope this helps. Cheers.

If real-time updating is truly required, as Neal suggested, Comet or Stream-Hub would be one avenue worth checking into.

As for the interface, I recently have been using JQuery Templates, and when reconciling added / removed / updated records, I use JQuery selectors to clear & update, and use Templates to add in new records. And because I'm using JQuery in all 3 events, I could easily integrate their motion / visual effects.

JQuery Templates

JQuery Selectors

JQuery Effects

Stream-Hub

I myself only needed polling (every 15 seconds) so I'm using Robert Fischer's improved JQuery PeriodicalUpdater

JQuery Periodical Updater