CODEWITHSUNDEEP
javascriptjqueryajaxtabulator
toryan
toryan

Reputation: 445

Use the same data for multiple tables with tabulator

I'm using jQuery and tabulator to create a fairly simple webpage showing the progress of various live events. I have three table elements on the page showing events in different states. Broadly speaking I have a table for events that are 'Live', 'Finished' and 'Upcoming'.

The tabulator code for each table looks a bit like this:

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

I can then generate and populate the tables using data retrieved from the server using an AJAX call:

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

Then similar code for the finished and upcoming tables.

This creates three requests for getevents.py every time the page is updated. This is undesirable because the data is pulled from another API and I want to avoid sending multiple identical requests. Also, there's a (small) chance the data could change between requests.

Is there a way of using the same data to populate all three tables?

Upvotes: 2

Views: 2088

Answers (3)

Oli Folkerd
Oli Folkerd

Reputation: 8348

If you are getting the data from a URL you can pass it into the ajaxURL property in the table constructor and tabulator will make the request for you:

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

Upvotes: 1

toryan
toryan

Reputation: 445

I fixed this fairly simply, using suggestions from @RoryGS.

Define the table options in a variable, as before:

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

Then make a jQuery ajax call to fetch the data, and build the table(s) in the success option of the function:

$(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"]);
    }
})})

It seems to be necessary to set the data individually for each table. I would like to specify the data in the constructor, but this doesn't seem to work. I will continue to try to refine this.

Upvotes: 1

RoryGS
RoryGS

Reputation: 1781

Learnt something today. Never heard of Tabulator. I've been using DataTables for this sort of advanced tabular layout in the form of a jQuery plugin. Tabulator looks promising. Will have to explore more in the future.

In the docs I see Tabulator - Set Table Data, lots of alternative options available to set the data.

Hope I am understanding the problem correctly.

My thoughts/flow for tacking this problem would be:

  • Assuming your doing this already: Prep server side (getevents.py) needs to return all 'Live', 'Finished' and 'Upcoming' rows in JSON together in 1 response. How do I make a JSON object with multiple arrays?.

  • Client side on doc ready(), makes a jQuery ajax call to fetch this data before 3 x tabulators are built/called.

  • You can use a loading indicator. So the client sees something is happening in the 3 x before replaced by jQuery tabulator once the data is returned and you built with tabulator.

  • In the ajax success callback function you can iterate over the returned json object (containing the 3 x eventTypes). You might have to JSON.parse() if you store it in a JavaScript variable to iterate over.

  • Now get your specific array of event types nested objects arrays/json.

  • Then call your tabulator creation methods using the setData pointing to each specific JavaScript array containing the relevant data.

Not sure if this falls under "premature optimization", but I would proceed as the problem itself is rather fun to solve, but you know the requirements/needs better than I.

Good luck.

Upvotes: 2

Related Questions