Используйте одни и те же данные для нескольких таблиц с табулятором - PullRequest
Новая
       9

Используйте одни и те же данные для нескольких таблиц с табулятором

0 голосов
/ 29 апреля 2018

Я использую jQuery и табулятор для создания довольно простой веб-страницы, показывающей ход различных живых событий. У меня есть три элемента таблицы на странице, показывающие события в разных состояниях. Вообще говоря, у меня есть таблица для событий «Live», «Finished» и «Upcoming».

Код табуляции для каждой таблицы выглядит примерно так: 

var eventTable = {
  layout:"fitColumns",
  columns:[
    {title:"Event ID", field:"eventID"},
    {title:"Event name", field:"eventName"},
    {title:"Event status", field:"eventStatus"}
  ]
};

Затем я могу сгенерировать и заполнить таблицы, используя данные, полученные с сервера с помощью вызова AJAX: 

$('#live-events-table').tabulator(eventTable);
$('#live-events-table').tabulator("setData", "/cgi-bin/getevents.py");
$('#live-events-table').tabulator("setFilter", "status", "in", ["intermission", "mid-event"]);

Затем аналогичный код для готовых и последующих таблиц.

Это создает три запроса для getevents.py каждый раз, когда страница обновляется. Это нежелательно, потому что данные извлекаются из другого API, и я хочу избежать отправки нескольких идентичных запросов. Кроме того, существует небольшая вероятность того, что данные могут изменяться между запросами.

Есть ли способ использовать одни и те же данные для заполнения всех трех таблиц?

Ответы [ 3 ]

0 голосов
/ 14 августа 2018

Я исправил это довольно просто, используя предложения @ RoryGS.

Определите параметры таблицы в переменной, как и раньше: 

var eventTable = {
  layout:"fitColumns",
  columns:[
    {title:"Event ID", field:"eventID"},
    {title:"Event name", field:"eventName"},
    {title:"Event status", field:"eventStatus"}
  ]
};

Затем выполните вызов jQuery ajax для извлечения данных и создайте таблицы в параметре success функции: 

$(function() {
  $.ajax({
    dataType: "json",
    url: "/cgi-bin/getevents.py",
    success: function(data, status){
      $('#live-events-table').tabulator(eventTable);
      $('#finished-events-table').tabulator(eventTable);
      $('#live-events-table').tabulator("setData", data);
      $('#live-events-table').tabulator("setFilter", "status", "in", ["intermission", "mid-event"]);
      $('#finished-events-table').tabulator("setData", data);
      $('#finished-events-table').tabulator("setFilter", "status", "in", ["post-event"]);
    }
})})

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

0 голосов
/ 24 сентября 2018

Если вы получаете данные из URL, вы можете передать их в свойство ajaxURL в конструкторе таблиц, и табулятор сделает запрос за вас: 

$("#example-table").tabulator({
    ajaxURL:"/cgi-bin/getevents.pyw", //ajax URL
    columns:[...] //define columns etc
});
0 голосов
/ 12 августа 2018

узнал что-то сегодня. Никогда не слышал о Tabulator . Я использовал DataTables для такого рода расширенного табличного макета в форме плагина jQuery. Табулятор выглядит многообещающе. Придется исследовать больше в будущем.

В документации я вижу Tabulator - Set Table Data , множество альтернативных опций, доступных для установки данных.

Надеюсь, я правильно понял проблему.

Мои мысли / ход для решения этой проблемы:

  • Предполагая, что вы уже делаете это: серверная часть Prep (getevents.py) должна вернуть все ' Live ', ' Finished ' и ' Upcoming 'строк в JSON вместе в 1 ответе. Как создать объект JSON с несколькими массивами? .

  • Клиентская сторона в doc ready () выполняет aJax-вызов jQuery для извлечения этих данных перед созданием / вызовом 3-х табуляторов.

  • Вы можете использовать индикатор загрузки . Таким образом, клиент видит, что что-то происходит в 3х, а затем заменяется табулятором jQuery после того, как данные возвращены, и вы создали табулятор.

  • В функции обратного вызова ajax success вы можете перебирать возвращаемый объект json (содержащий 3 x eventTypes). Возможно, вам придется JSON.parse () , если вы сохраните его в переменной JavaScript для итерации.

  • Теперь получите ваш конкретный массив типов событий массивы вложенных объектов / json .

  • Затем вызовите методы создания вашего табулятора, используя setData, указывающий на каждый конкретный массив JavaScript, содержащий соответствующие данные.

Не уверен, что это подпадает под "преждевременную оптимизацию", но я бы продолжил, поскольку саму проблему решить довольно весело, но вы знаете требования / потребности лучше, чем я.

Удачи.

...