Tabulator: load data from a JSON file

user_17308565 0
Viewed 250

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"}
]

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>

What am I doing wrong?
Thank you.

tabulator javascript
2 Answers

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

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
});

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

user_35889930

For any other novices/amateurs out there....following Oli's advice I have a working solution as follows:

Create a JSON file called text_Array.json with the following content:

[
{"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"}
]

Create an html file called tabulator3.html with the following content. Put the JSON file in the same folder as the HTML file and it will work :

<!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>

<!-- the line below is necessary for the Date sorter to work - it is buried in the v5.1 documentation here
http://tabulator.info/docs/5.1/sort#func-builtin -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/luxon/2.3.1/luxon.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", {
        ajaxURL:"test_Array.json",        //load sample data into the table
        height:205, 

            columns:[ //Define Table Columns
                {title:"Name", field:"name", width:150},
                {title:"Age", field:"age", hozAlign:"left", formatter:"progress"},
                {title:"Favourite Color", field:"col"},
                {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
            ]
        });
      
   </script> 

</body>
</html>

Thanks, Oli!

user_173085650
Related