Geek Answers Handbook

Fill JSON into a table in real time using JQUERY

I am looking for a library that does this:

  • Get JSON via an AJAX call
  • Fill a table with JSON
  • Real-time updating of a table with JSON (call every x seconds) and only deleting or hiding rows that are deleted or inserted new rows.

/ Editing after the first answer

Well, I think my first explanation was not very good. Getting jSON with jQuery and building the table is fine, I could do it, but my query was more on the other hand. I am looking for a library to display the result in a special way. Let me explain.

Request Json 1 to send:
1, Tomato 2, Apple 3, Salad 4, Carot

Request Json 2 to send:
1, Tomato 3, Salad 4, Karota 5, Potato

I would like the second line to disappear with the effect (fadeOut), and the lines below - up. For line 5, I just want a new line with attenuation to appear.

Is that more clear?

Is there any library that does this?

I do this in PHP, but I hope to write all this in JS.

The user can simply look at the table and see new rows and delete old rows.

Any ideas or should I write this from scratch?

+5
source share
7 answers

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

It provides an API that allows you to provide new data from the server upon request: http://www.datatables.net/api

, , ..

, .

+1

json ( get post, ):

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

JQuery Grid Plugin. JSON . -, , php.

+1

, .

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

AJAX JQuery

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

php data, HTML table, table innerHTML .html() JQuery - , /, , , table, , .

0

awesome jqGrid .

autorefresh, :

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

, . .

0

, , Stream-Hub , .

, JQuery Templates, // JQuery . JQuery , / .

JQuery

JQuery

JQuery

Stream-Hub

( 15 ), , JQuery PeriodicalUpdater

JQuery Periodical Updater

0
source

More articles:


All Articles