Tabulator: Can't get it to work at all

[css3238]

I can't get a table to load for anything. My original data is coming in via ajax, but I stripped it down to some data I defined within the script for testing purposes and still no table. I've tried loading supporting libraries from CDNs and from files directly. The libraries are loading in my browser but nothing happens. I'm genuinely confused.

[css3238]

Here is the stripped down example: moravianmusic.org/dbtest2.html

[quangkieu]

@css3238 Your sample has the wrong table id to initialization
$("#example-table").tabulator(...)
Change it to
$("#anthem-table").tabulator(...)
and I got it working

Quang

[css3238]

@quangkieu I feel dumb. So that explains why the stripped-down version didn't work. But I changed that file to use my JSON data and once again I get nothing. The link above takes you to that new page. Why won't the JSON data load? Thanks for the help!

[Nyut0n]

You have no constructor in your code, so the table is not even initialized. You can't call "setData" on a table that doesn't exist.

Furthermore, the link you provided to load JSON data loads for a very long time and does not return an array, which is required for setting table data.

[css3238]

OK, I think I understand my confusion on the code. Thank you @Nyut0n. Forgive my ignorance. And while the data does take a long time to load, it does return an array so I'm confused by your second part.

[Nyut0n]

The URL returns an object with 3 properties: "ErrorCode", "MoraAnthemRecordCount" and "MoraAnthemRec". That's what Tabulator sees. I'm sure you want to pass the MoraAnthemRec property into the table, which is an array indeed. But Tabulator can't know that, it'll just see the wrapper object with its 3 properties. So you will have to alter the AJAX response before passing it into the table.
It should be pretty simple, read up on the "Ajax Response Alteration" part of in the documentation, it has a perfect example.

[css3238]

Thank you for your patience. I will do just that.

[css3238]

@Nyut0n Any chance you could help me understand a little more? I can't figure out how to pull that array out and honestly don't know where to begin. I read the documentation but just don't understand it.

[quangkieu]

The ajaxResponse is a callback function which would trigger after the ajax request for data.
You would need to call setData after initialize
$("#example-table").tabulator("setData","http://www.getmydata.com/now", {key1:"value1", key2:"value2"});
http://tabulator.info/docs/3.5#ajax

[quangkieu]

$("#anthem-table").tabulator({
    columns:[
      {title:"Sort Key", field:"Sort key", sorter:"string"},
      {title:"Proper", field:"Proper", sorter:"string"},
    ],
    ajaxResponse:function(url, par, response){
            return response.MoraAnthemRec;
        }
  });

//load sample data into the table
$("#anthem-table").tabulator('setData',"http://thyme.dbbee.com/u/VWSH2BRCFQ/Project_BPS08jsonapi.wbsp")

[css3238]

There's so much I want to ask to learn but this is not the forum. Thank you so very much! Your product is outstanding.

[quangkieu]

I would recommend head up to the Progressive Loading and Remote Pagination/Filter of Document to improve/reduce returned data down to good size for your server and client.