質問

Tabulator を使用してJsonデータを表にしようとしています。
（将来はサーバから受信したJsonデータを表にする予定です。）

ですが、肝心のTabulatorで作成した表が表示できていません。
どうしたら、上手く表示できるようになるのでしょうか？

表示内容

comixes list
jQuery version :1.12.4
jQuery ui version:1.12.1
[object Object],[object Object]

comixes list と jQuery version :1.12.4 の間に

Name	Author	Publisher
銀の匙	荒川　弘　著	小学館
はなまる魔法教室	井上知之　著	小学館

の様な表ができることを期待しているのですが、、、、、

ソース

上記表示のソースは以下です。

html
1<!doctype html>
2<html lang="ja">
3<head>
4  <title>Comixes</title>
5  <meta charset="utf-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1">
7
8  <!-- datapicker -->
9  <link rel="stylesheet" href="/resources/demos/style.css">
10  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
11  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
12
13  <!-- Reading Json -->
14  <link href="https://unpkg.com/tabulator-tables@4.5.3/dist/css/tabulator.min.css" rel="stylesheet">
15  <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.5.3/dist/js/tabulator.min.js"></script>
16  <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.5.3/dist/js/jquery_wrapper.min.js"></script>
17  <script type="text/javascript">
18    var sampleData = [{id:320,"name":"銀の匙","publisher":"小学館","author":"荒川　弘 著"},
19                      {id:321,"name":"はなまる魔法教室","publisher":"小学館","author":"井上 知之 著"}];
20
21    table.setData(sampleData);
22    var table = new Tabulator("#comixes-table", {
23      height:"320px",           //set height of table(optional)
24      data:sampleData,          //load row data from array
25      columns:[                 //define the table columns
26        {title:"Name", field:"name"},
27        {title:"Author", field:"author"},
28        {title:"Publisher", field:"publisher"},
29      ],
30    });
31  </script>
32
33</head>
34<body>
35  <h1>comixes list</h1>
36  <!-- comixes -->
37  <div id="comixes-table"></div>
38  <div><script>document.write("jQuery version :" +  $.fn.jquery)</script></div>
39  <div><script>document.write("jQuery ui version:" + $.ui.version)</script></div>
40  <div><script>document.write(sampleData)</script></div>
41  
42</body>
43</html>

行動規範の内容に同意します

回答1件

ベストアンサー

HTMLのロードを待ってみてはいかがでしょう。

js
1    var sampleData = [{id:320,"name":"銀の匙","publisher":"小学館","author":"荒川　弘 著"},
2                      {id:321,"name":"はなまる魔法教室","publisher":"小学館","author":"井上 知之 著"}];
3
4 // table.setData(sampleData); // 定義前のTabulatorに代入しても意味が無い（エラーになる可能性しかない）
5    $(function(){ // HTMLのロードを待ってみては？
6    var table = new Tabulator("#comixes-table", {
7      height:"320px",           //set height of table(optional)
8      data:sampleData,          //load row data from array
9      columns:[                 //define the table columns
10        {title:"Name", field:"name"},
11        {title:"Author", field:"author"},
12        {title:"Publisher", field:"publisher"},
13      ],
14    });
15    });