ajax で json データを読み込むには、ajaxURL に jsonデータを返す CGI または、jsonファイルを指定します。
var table = new Tabulator("#table", {
ajaxURL: "ajax.json",
データ定義は、ajax.json というファイルの内容です。 サンプルコードを実行する場合は、データ定義の内容を ajax.json というファイルに保存して、サンプルコードと同じディレクトリに置いてください。
以下、カラム定義、データ定義、実行結果、サンプルコードです。
カラム定義
var columns=[
{title:"name", field:"name"},
{title:"date", field:"date"},
];
データ定義
[
{
"name": "May",
"date": "2019/5"
},
{
"name": "April",
"date": "2019/4"
}
]
実行結果
サンプルコード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link href="https://unpkg.com/tabulator-tables@4.4.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.4.3/dist/js/tabulator.min.js"></script>
</head>
<body onload="show_table()">
<h1 id=title> ajax で jsonデータを読み込む </h1>
<div id="table"></div>
<script type="text/javascript">
var show_table = function(){
var columns=[
{title:"name", field:"name"},
{title:"date", field:"date"},
];
var table = new Tabulator("#table", {
ajaxURL: "ajax.json",
columns:columns
});
}
</script>