Load AJAX data within Tabulator?

I am trying to understand a Vanilla Javascript “library” called Tabulator ( http://tabulator.info ). It is sort of Datatables clone as I understand it. But the pagination is “automatic” sort of.

According to the documentation, the AJAX call should be “inside” the “Tabulator” code :

var table = new Tabulator("#example-table", {
    ajaxURL:"http://www.getmydata.com/now", //ajax URL
});

When I tries to fetch data “outside” the Tabulator, the “normal way” it works. Even if it is slooow…

https://jsfiddle.net/8gae4dtk/3/

When I follow the documentation it does not work:

https://jsfiddle.net/av4rftgs/2/

My wild guess is that outside no CORS is enabled, but inside the “Tabulator” the CORS is activated.

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers.

Any tip how to get this to work according to the documentation? It seems that the Tabulator works faster with AJAX call inside.

I see both examples being CORS blocked. Make sure that the resource you are attempting to access has the Access-Control-Allow-Origin header set to accept other origins. I think the resource you are trying to access doesn’t specify any origin header or is allowing a very specific set of headers to be sent along with the request. Try taking the output of that URL, put it on a host where you can control the headers (like AWS) and specify the header with “*”. Then try again. I bet it will work that way.

CORS is largely controlled by the domain who is hosting the resource, not necessarily the script accessing the resource. They control who and what can be done with the resource you are requesting. Probably less to do with Tabulator itself. :slight_smile:

1 Like