CODEWITHSUNDEEP
phpjqueryjsonreal-time
Nicolas
Nicolas

Reputation: 137

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 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?

Upvotes: 1

Views: 1507

Answers (2)

Edgar Villegas Alvarado
Edgar Villegas Alvarado

Reputation: 18344

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.

Upvotes: 1

publikz.com
publikz.com

Reputation: 961

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.

Upvotes: 0

Related Questions