I want to load a json file into my Tabulator table.
The programs.json is in the same directory as the html file.
My html code is rendering the table but i couldnt manage to load the local stored .json file.
There is a lot of documentation here http://tabulator.info/docs/4.9/data and http://tabulator.info/docs/3.5#set-data
The content of programs.json is following:
[{
"name": "Stomachache",
"freq": "10000,5000,880,3000,95",
"db": "XTR",
"info": "Bauchschmerzen"
}, {
"name": "Headache",
"freq": "380,2720,2489,2170,1800,1600,1550,880,832,787,776,727,465,444,1865,146,125,95,72,20,450,440,428,660",
"db": "CAF",
"info": "Kopfschmerzen"
}, {
"name": "Toothache",
"freq": "3000,95,1550,880,787,776,727,650,625,600,28,35,28,110,100,60,428,680",
"db": "XTR",
"info": "Zahnschmerzen"
}]
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="favicon.png">
<meta charset="utf-8">
<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="programs"></div>
<script type="text/javascript">
var table = new Tabulator("#programs", {
ajaxURL:"./programs.json", // http://tabulator.info/docs/4.9/data
//ajaxContentType:"json",
height: 326,
layout: "fitColumns",
pagination: "local",
paginationSize: 10,
tooltips: true,
index: "name",
columns: [{
title: "Name",
field: "name",
sorter: "string",
headerFilter: "input"
},
{
title: "Frequencies",
field: "freq",
sorter: "string",
headerFilter: "input"
},
{
title: "Database",
field: "db",
sorter: "string",
editor: "select",
width: 90,
headerFilter: true,
},
{
title: "Programm Info",
field: "info",
sorter: "string",
headerFilter: "input"
},
],
ajaxResponse:function(url, params, response){
//url - the URL of the request
//params - the parameters passed with the request
//response - the JSON object returned in the body of the response.
return response.data; //pass the data array into Tabulator
},
});
</script>
</body>
</html>fetch() doesnt support local file access. But the browser will through the tag, so if you make your programs.json be proper JS ...
programs.json :
let setData = [ { .... } ];
programs.html :
<html>
<head>
...
<script type="text/javascript" src="programs.json"></script>
</head>
<body>
...
<script>
new Tabulator("#programs",{
data:setData,
...
});
</script>
</body>
</html>