デモページ 配布サイト 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 + プラグインの最新記事】
- JSON データを即 TABLE 要素にセットしてくれる jQuery プラグイン『DYNATABLE』の利用
- かつての FRAME のように画面下部に張り付く IFRAME を実装する jQuery プラグイン
- jQuery Columns を使って、Picasa API より アルバム一覧を表示する
- jquery.balloon.js + Google ドライブの webViewLink(仮想ディレクトリ) + Google ストートビュー画像
- jQuery プラグイン jquery.balloon.js で、画像吹き出しを使って吹き出しの中央に文章を配置する
- jQuery のプラグイン jquery-color を使って、『青黒』なのか『白金』なのか、と言う『錯視』を再現しました。
- テーブル要素内のデータよりグラフを作成する jQuery プラグイン『jQuery-Visualize』をもっと使いやすく改造しました
- jQuery.selection(プラグイン) : テキストエリア内のカーソル位置や選択範囲に対して文字列を追加したり置き換えたりする。
- jQuery プラグイン : multiselect.js の使用方法とカスタマイズ
- jQuery の Chosen プラグイン( 複数選択コンボボックス ) の使い方
- 使いどころが難しいですが、入力をコンボボックス化する jQuery プラグインの実装が不便だったので、modify しました。
- 常に表示する事もできる jQuery プラグインカラッービッカーをカスタムタグ <colorpicker> で実装
- jQuery plugin カラーピッカー : ExColor (V 1.2) とその『バグ』
