Question

我正在使用jQuery和制表工具来创建一个相当简单的网页，显示各种直播活动的进度。我在页面上有三个表元素，显示不同状态的事件。从广义上讲，我有一个关于“现场”，“完成”和“即将发生”事件的表格。

每个表的制表符代码看起来有点像这样：

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中提取的，我想避免发送多个相同的请求。此外，数据可能会在请求之间发生变化（小）。

有没有办法使用相同的数据来填充所有三个表？

Answer 1

今天学到一些东西。从未听说过 Tabulator 。我一直在以DataTables的形式使用jQuery插件的形式进行这种高级表格布局。制表器看起来很有希望。将来将不得不进行更多探索。

在文档中，我看到Tabulator - Set Table Data，有许多可供选择的选项可用于设置数据。

希望我能正确理解问题。

我解决这个问题的想法/流程是：

假设您已经这样做：Prep服务器端（getevents.py）需要返回所有' Live '，' Finished '和' JSON中即将出现的行在1个响应中一起显示。 How do I make a JSON object with multiple arrays?。
doc ready（）的客户端在构建/调用3个制表符之前进行jQuery ajax调用以获取此数据。
您可以使用loading indicator。因此，一旦返回数据并使用制表符构建，客户端就会看到3 x中发生了什么，然后由jQuery制表符替换。
在ajax成功回调函数中，您可以迭代返回的json对象（包含3 x eventTypes）。如果将其存储在JavaScript变量中以进行迭代，则可能需要 JSON.parse（）。
现在获取事件类型nested objects arrays/json的特定数组。
然后使用setData调用制表符的创建方法，该方法指向每个包含相关数据的特定JavaScript数组。

不确定这是否属于“过早优化”范围，但是我会继续进行，因为问题本身很有趣，但您比我更了解需求/需求。

祝你好运。

Answer 2

我使用@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"]);
    }
})})

似乎有必要为每个表分别设置数据。我想在构造函数中指定数据，但这似乎不起作用。我将继续尝试完善这一点。

Answer 3

如果要从URL获取数据，则可以将其传递到表构造函数的 ajaxURL 属性中，制表符将为您提出请求：

$("#example-table").tabulator({
    ajaxURL:"/cgi-bin/getevents.pyw", //ajax URL
    columns:[...] //define columns etc
});

使用制表符对多个表使用相同的数据

3 个答案: