SQLの窓

2017年04月15日


JSON データを即 TABLE 要素にセットしてくれる jQuery プラグイン『DYNATABLE』の利用


デモページ

いろいろしっかりした API を揃えている優秀そうなプラグインなんですが、何故かさっぱり日本語のページがヒットせず、サンプルコードも見つかりません。なので、基本的なコードのみで即動作するコードの紹介です。

そもそも、目的としては PHP で JSON の配列データは埋め込んでしまって、そのまま jQuery のプラグインを起動させるという単純なもので、PHP 部分は <?= $変数 ?> とかで実装して下さい。

それと、配布ページのデモは、bootstrap 前提で表示されているので、こちらからのデモページでは cdnjs で貼り付けています。

ソースコード
<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>

<script>
$(function(){
	$('#my-table').dynatable({
		dataset: {
			records: [ {
				  "code" : "0001",
				  "name" : "浦岡 友也"
				}, {
				  "code" : "0002",
				  "name" : "山村 洋代"
				}, {
				  "code" : "0003",
				  "name" : "多岡 冬行"
				} ]
		}
	});
});
</script>
<div style='width:500px;margin:100px auto;'>
<table id="my-table" class="table table-bordered">
	<thead>
		<th>code</th>
		<th>name</th>
	</thead>
	<tbody></tbody>
</table>
</div>




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

Microsoft Office
container 終わり

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

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