Tabulator: load data from a JSON file

I want Tabulator to automatically load data from a JSON file.
I have made it work with a button.
I have read the q & a here
Load table data from text file
I have also read the documentation here.
http://tabulator.info/docs/4.4/data#array-initial
(By the way, I was expecting the ajaxURL documentation to show a URL ending with a FILE name rather than “/now”… something like $("#div1").load("demo_test.txt"); )

I’m not a professional developer so please be gentle with me.

Here is the content of the JSON file (called “test_Array.txt” and in the same directory as the HTML).

[
{"name": "Oli Bob", "age": "12", "col": "red", "dob": "14/05/1982"},
{"name": "Mary May", "age": "1", "col": "blue", "dob": "14/05/1982"},
{"name": "Christine Lobowski", "age": "42", "col": "green", "dob": "22/05/1982"},
{"name": "Brendon Philips", "age": "125", "col": "orange", "dob": "01/08/1980"},
{"name": "Margret Marmajuke", "age": "16", "col": "yellow", "dob": "31/01/1999"}
]

JavaScript
​x
 
[
{"name": "Oli Bob", "age": "12", "col": "red", "dob": "14/05/1982"},
{"name": "Mary May", "age": "1", "col": "blue", "dob": "14/05/1982"},
{"name": "Christine Lobowski", "age": "42", "col": "green", "dob": "22/05/1982"},
{"name": "Brendon Philips", "age": "125", "col": "orange", "dob": "01/08/1980"},
{"name": "Margret Marmajuke", "age": "16", "col": "yellow", "dob": "31/01/1999"}
]
​

It passes validation at https://jsonlint.com/

Here is the HTML

<!DOCTYPE html>

<html lang="en">
<head>
    <link href="https://unpkg.com/tabulator-tables@5.1.3/dist/css/tabulator_site.min.css" rel="stylesheet"> 
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.1.3/dist/js/tabulator.min.js"></script>
    <meta charset="utf-8" />
    <title>tabulator3</title>
</head>
<body>

<div id="example-table"></div>

    <script>
        //create Tabulator on DOM element with id "example-table"
        var table = new Tabulator("#example-table", {
        height:205, 
        // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
        //layout:"fitDataFill",//fit columns to fit data and width of table (optional)
        //data:tableData, //set initial table data
            columns:[ //Define Table Columns
                {title:"Name", field:"name", width:150},
                {title:"Age", field:"age", align:"left", formatter:"progress"},
                {title:"Favourite Color", field:"col"},
                {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
            ]
        });
      
    //load sample data into the table
    table.setData("test_Array.txt")
    </script> 

</body>
</html>

JavaScript
 
<!DOCTYPE html>
​
<html lang="en">
<head>
    <link href="https://unpkg.com/tabulator-tables@5.1.3/dist/css/tabulator_site.min.css" rel="stylesheet"> 
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.1.3/dist/js/tabulator.min.js"></script>
    <meta charset="utf-8" />
    <title>tabulator3</title>
</head>
<body>
​
<div id="example-table"></div>
​
    <script>
        //create Tabulator on DOM element with id "example-table"
        var table = new Tabulator("#example-table", {
        height:205, 
        // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
        //layout:"fitDataFill",//fit columns to fit data and width of table (optional)
        //data:tableData, //set initial table data
            columns:[ //Define Table Columns
                {title:"Name", field:"name", width:150},
                {title:"Age", field:"age", align:"left", formatter:"progress"},
                {title:"Favourite Color", field:"col"},
                {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
            ]
        });
      
    //load sample data into the table
    table.setData("test_Array.txt")
    </script> 
​
</body>
</html>
​

What am I doing wrong?
Thank you.

Answer

To start off I would say you have posted a link to the v4.4 documentation, but using version 5.1 of Tabulator. It is defo worth reading the correct docs to get started 🙂

Following on from that the issue that you are experiencing is because as of version 5.0 Tabulator now has an async start up process that means you cant just call setData straight after instantiating the table, you must wait for the tableBuilt event:

table.on("tableBuilt", function(){
    table.setData("./test_Array.txt");
});

JavaScript
 
table.on("tableBuilt", function(){
    table.setData("./test_Array.txt");
});
​

More importantly if you are just loading data straight from the file then there is no need to set data after the table has been built, you can use the ajaxURL setup option to load the data into the table while it is being built:

var table = new Tabulator("#example-table", {
    ajaxURL:"./test_Array.txt",
    ... other table options
});

JavaScript
 
var table = new Tabulator("#example-table", {
    ajaxURL:"./test_Array.txt",
    ... other table options
});
​

As a complete aside if the text file just contains JSON data, then the convention is to end the file with .json instead of .txt

Advertisement

Answer