SQLの窓

2017年06月10日


JSON 配列を WEB より読み出して jQuery のプラグイン『DYNATABLE』で動的にテーブルを作成して表示する


デモページ

配布サイト

DYNATABLE プラグインは、ドキュメント上では動的にテーブルを再ビルドするようには考えられていません。固定の JSON データをブラウザ側のみで処理する事を想定されています。そのサンプルは単純で、JSON データを即 TABLE 要素にセットしてくれる jQuery プラグイン『DYNATABLE』の利用 にあります。

しかしよくよく調べてみると、Stack Overflow で『動的に書き換える』方法が解答として紹介されています。その方法をもう少し進めて、整理したサンプルを作成しました。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dynatable/0.3.1/jquery.dynatable.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Dynatable/0.3.1/jquery.dynatable.min.js"></script>
<style>
body {
	padding: 10px 0 0 20px;
}
@media screen and ( max-width:479px )
{
	body {
		padding: 0px;
	}
}
#table_wrap {
	width:900px;

}
</style>
<script>
$(function(){

	// 最初にデータなしで作成してタイトルの CSS 有効にする
	window.dynatable = $('#syain').dynatable().data( "dynatable" );

	// データのみのクリア
	$("#btn2").on( "click", function(){
		
		dynatable.settings.dataset.originalRecords = [];
		dynatable.process();

	});

	$("#btn1").on( "click", function(){
	
		console.log("クリックされました");
		$.ajax({
			url: "https://lightbox.sakura.ne.jp/demo/json/syain_api_bind.php",
			cache: false,
			data: { "name" : $("#cond").val() }
		})
		.done(function( data, textStatus ){
			console.log( "status:" + textStatus );
			console.log( "data:" + JSON.stringify(data, null, "    ") );

			// この部分で新しいデータが反映されます
			dynatable.settings.dataset.originalRecords = data;
			dynatable.process();
			
		})
		// 失敗
		.fail(function(jqXHR, textStatus, errorThrown ){
			console.log( "status:" + textStatus );
			console.log( "errorThrown:" + errorThrown );
		})
		// 常に実行
		.always(function() {
			console.log("常に実行");
		})
		;
	
	});
});
</script>
<h3>社員一覧</h3>

<input id="cond" type="text">
<input id="btn1" type="button" value="検索">
<input id="btn2" type="button" value="リセット">

<!-- dynatable ではタイトル部分のみ作成しておく -->
<div id="table_wrap" class="table-responsive">
<table id="syain" class="table table-bordered">
	<thead>
		<th>社員コード</th>
		<th>氏名</th>
		<th>フリガナ</th>
		<th>所属</th>
		<th>性別</th>
		<th>給与</th>
		<th>手当</th>
		<th>管理者</th>
	</thead>
	<tbody></tbody>
</table>
</div>




【jQuery + プラグインの最新記事】
posted by lightbox at 2017-06-10 01:21 | Comment(0) | jQuery + プラグイン | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり