Заполните JSON в таблицу в режиме реального времени с помощью JQUERY

Question

Я ищу библиотеку, которая делает это:

• Извлечение JSON с помощью вызова AJAX
• Заполнить таблицу с помощью JSON
• Обновлять в реальном времени таблицу с помощью JSON (вызывать каждые x секунд) и удалять или скрывать только те строки, которые были удалены, или вставлять новые строки.

/ Редактирование после первого ответа

Хорошо, я думаю, мое первое объяснение было не очень хорошим. Получение через JQuery JSON и создание таблицы - это хорошо, я мог бы это сделать, но мой запрос был скорее с другой стороны. Я ищу библиотеку для отображения результата особым образом. Позвольте мне объяснить.

JSON-запрос 1 отправить:
1; помидор 2; яблоко 3; салат 4; морковь

JSON-запрос 2 отправьте:
1; помидор 3; салат 4; морковь 5; картофель

Я бы хотел, чтобы вторая строка исчезла с эффектом (fadeOut), а строки ниже переместились вверх. Для строки 5 я просто хочу, чтобы появился новый ряд с появлением.

Это более понятно?

Существует ли какая-либо библиотека, делающая это?

Я делаю это на PHP, но я надеюсь написать все это на JS.

Пользователь может просто просмотреть таблицу и увидеть, как появляются новые строки и удаляются старые строки.

Есть идеи или я должен написать это с нуля?

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

Answer 2

Если вы хотите что-то дружелюбное и полное различных полезных функций, вы можете использовать плагин jQuery под названием DataTables.

Предоставляет API, позволяющий предоставлять новые данные с сервера по запросу: http://www.datatables.net/api

Работает и для простых реализаций, довольно настраиваем, позволяет менять внешний вид и т. Д.

Надеюсь, это полезно.

Answer 3

Попробуйте Jquery Grid Plugin .Вы можете получить JSON с сервера и построить сетку на стороне клиента.Взгляните на веб-сайт, есть несколько примеров, включая php.

Answer 4

Вот действительно хорошая статья о различных методах опроса / кометы, которую вы захотите изучить.Он кратко описывает каждый из них и указывает на некоторые подводные камни, о которых вы можете и не подумать. http://query7.com/avoiding-long-polling. Также здесь есть плагин jquery для длинных опросов: http://enfranchisedmind.com/blog/posts/jquery-periodicalupdater-ajax-polling/

Answer 5

Если обновление в реальном времени действительно необходимо, как предложил Нил, Comet или Stream-Hub - это один из способов, который стоит проверить.

Что касается интерфейса, я недавно использовал шаблоны JQuery, и когдасогласовывая добавленные / удаленные / обновленные записи, я использую селекторы JQuery для очистки и обновления и использую шаблоны для добавления новых записей.И поскольку я использую JQuery во всех 3 событиях, я мог легко интегрировать их движения / визуальные эффекты.

JQuery Templates

JQuery Selectors

Эффекты JQuery

Stream-Hub

Я сам нуждался только в опросе (каждые 15 секунд), поэтому я используюУлучшенный JQuery PeriodicalUpdater от Роберта Фишера

JQuery Periodical Updater

Answer 6

Вы можете использовать удивительный плагин jqGrid .

Чтобы сделать автообновление, вы должны сделать это:

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

Надеюсь, это поможет. Приветствия.

Answer 7

Сначала я прочитал бы это , но код на самом деле очень прост.

На вашем интерфейсе у вас будет таблица

<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, так что выпросто отобразить это точно, вы можете обрабатывать все причудливые вещи на стороне сервера.