JS Library to display table in realtime

Now I'm familiar with JSON and jQuery I'm looking for a library which do this:

Update in real time my table (with the JSON (call every x seconds)) and only delete or hide the rows wich are deleted or insert the new rows, but i开发者_StackOverflow need to display the new rows 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 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 could use the awesome jqGrid plugin.

To do the autorefresh, you should do this:

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

To change which params to send, use the plugin method .setPostData()

Hope this helps. Cheers.

Your can write this in pure jquery. Just load table every time, with .post() as example. Fade in/out - is also not a big problem, just append html (div/row) and them show() with effect of vertical slide. Maybe with opacity change.

PS. Specially suggest your look inside ExtJS grids ... this is another way make table appear nicely. One thing your need to extjs - timer, to update it, if mysql is changing in background also.