tabulatorが全く動きません。

前提・実現したいこと

tabulatorというライブラリを使用してPHPから出力したデータをテーブルとして表示させようとしています。
しかし何度やっても表示されません。
ソースを確認すると配列の中にはデータが入っているようなのですがtabulatorが全く動かないのです。
尚、公式のソースをコピーして貼り付けても動きません。
もうお手上げという状態です。
どのようにすればtabulatorが動くのか、何卒御教授の程、よろしくお願いします。

該当のソースコード

<!DOCTYPE html> <head> <script type="text/javascript" src="jquery-3.4.1.min.js"></script> <script type="text/javascript" src="jquery-ui.min.js"></script> <script type="text/javascript" src="tabulator.js"></script> <link rel="stylesheet" href="jquery-ui.min.css"> <link rel="stylesheet" href="tabulator.min.css"> </head> <body> <div id="example-table"></div> <script type="text/javascript"> var tabledata = [ <?php $con = mysql_connect("Database","User","Password") or die("接続失敗"); mysql_select_db('Database_name',$con) or die("DBがありません"); $y_sql ="SET CHARACTER SET UTF8"; mysql_query($y_sql,$con);

		$y_sql = "SELECT id,sales_staff,client FROM client_tbl";
		$res = mysql_query($y_sql,$con);
		while ($item = mysql_fetch_array($res)){
			print "{id:\"".$item[0]."\", sales_staff:\"".$item[1]."\", client:\"".$item[2]."\",},\n";
		}
	?>];
	var table = new Tabulator("#example-table", {

　　　　　　　　　　　data:tabledata,
height:"311px",
columns:[
{title:"ID", field:"id"},
{title:"営業", field:"sales_staff"},
{title:"顧客", field:"client"},
],
});
</script>

</body> </html>

補足情報（FW/ツールのバージョンなど）

使用ブラウザ：IE11
尚、何も表示されないIEのソースコードを確認するとMySQLからデータは来ています。
72行程度の情報で、全てのデータがtabledataの中に入っていることは確認してあります。

oikashinoa

2019/09/12 09:40

chromeで動くので有ればpolyfill導入すれば良いと思います。

Lhankor_Mhy

2019/09/12 09:58 編集

変数 tabledata について、代入文しか見つかりません。テーブルにするにはどこかで参照しなくてはいけないと思いますので、おそらくご提示いただいていない部分に原因があると思います。参照している部分のコードをご提示ください。

Lhankor_Mhy

2019/09/12 10:02

Markdownを利用しましょう https://teratail.com/help/question-tips#questionTips3-7 結果（実際に起きたこと）を書きましょう https://teratail.com/help/question-tips#questionTips3-4-1 エラーメッセージや実行ログをコピー&ペーストしましょう https://teratail.com/help/question-tips#questionTips3-4-2

rista

2019/09/12 10:28

>Lhankor_Mhy様失礼しました。 tabledataは var table = new Tabulator("#example-table", { Data:tabledata, でnew Tabulatorの中に反映させておりました。現在、画面は白いままでソースコードを見ると、配列が存在しているという状態です。 >oikashinoa 様 chromeでも動かない状態です。

Lhankor_Mhy

2019/09/12 10:29

コードの修正は、質問の修正から行った方が、回答がつきやすいです。

Lhankor_Mhy

2019/09/12 10:48

ご提示のコードを試してみましたが、動作しました。

rista

2019/09/12 11:03

>Lhankor_Mhy様ありがとうございます。こちらでは全く動きません。白い画面だけです。ソースコード以外の可能性も考えて、データ内容を一行にしたり、ソースコードをいちから書き直したり、ライブラリを差し替えたりしてみても全く出てこない状態です。

Lhankor_Mhy

2019/09/12 11:22

問題が再現するコードをご提示いただくのが一番かと思います。 PHPのコードではなくて、出力結果のHTMLをご提示いただいたほうが回答がつきやすいかと思います。回答しやすい質問をするために、↓ヘルプもご参照ください。 Markdownを利用しましょう https://teratail.com/help/question-tips#questionTips3-7 エラーメッセージや実行ログをコピー&ペーストしましょう https://teratail.com/help/question-tips#questionTips3-4-2

rista

2019/09/12 11:53

>Lhankor_Mhy様動かなかった原因は判明しませんでしたが、何度か丁寧に作り直したら表示されるようになりました。いろいろ調べていただいた上、質問の仕方まで教えていただきありがとうございます。

Lhankor_Mhy

2019/09/12 11:54

ご解決されて何よりです。

kei344

2019/09/12 16:07

まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。

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

回答1件

自己解決

解決致しました。
ご協力いただいた方々に感謝いたします。

尚、再度パソコンの電源を落とし、IEを立ち上げた時には以前と同じように表示されませんでした。
どうやらデータ数が多い？と表示されないでタイムアウトしてしまうのかもしれないです。
変数$iでカウントして50件制限をかけてみたらきちんと表示されました。
念のため御報告致します。

<!DOCTYPE html>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta http-equiv=content-type content="text/html; charset=UTF-8">

  	<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
	<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
	<script type="text/javascript" src="jquery-ui.min.js"></script>
	<link href="jquery-ui.min.css" rel="stylesheet" >
	<link rel="stylesheet" href="tabulator.min.css">
	<script type="text/javascript" src="tabulator.min.js"></script>

</head>
<body>
<div id="example-table"></div>
<script type="text/javascript">
	var tabledata = [
	<?php
		
		$con = mysql_connect("Database","User","Pass") or die("接続失敗");
		mysql_select_db('keiei_db',$con) or die("DBがありません");
		$y_sql ="SET CHARACTER SET UTF8";
		mysql_query($y_sql,$con); 

		$y_sql = "SELECT * FROM sugar_tbl";
		$res = mysql_query($y_sql,$con);

		$i = 0;
		while ($item = mysql_fetch_array($res)){
			print "{id:\"".$item[id]."\", sales_staff:\"".$item[sales_staff]."\", client:\"".$item[client]."\",},\n";
			$i++;
			if($i > 50){
				break;
			}
		}
	?>];
	var table = new Tabulator("#example-table", {
		data:tabledata,
		height:"311px",
		columns:[
			{title:"ID", field:"id"},
			{title:"営業", field:"sales_staff"},
			{title:"顧客", field:"client"},
		],
	});
	</script>
	</body>
</html>

投稿2019/09/12 23:38

rista

総合スコア4