前回で表示までは、出来ました?
出来た事にして
次はイベントを拾いたい
最低限拾いたいイベントは以下
・サーチ実行時
・表示行数変更時
・ページ変更時
・行選択時
公式ページ:https://datatables.net/reference/event/
ここを見れば載っているのですが
実質使うのが上の4つぐらいです。
utable=$('#usrtbl').DataTable();
//サーチ実行時
utable.on( 'search.dt', function () {
…
});
});
//ページ変更時
utable.on( 'page.dt', function () {
…
});
//行選択時
$('#usrtbl tbody').on( 'click', 'tr', function () {
//jsonで取得した値取得
var rowData = utable.row(this).data();
項目=rowData['項目ID'];
…
//編集後の項目
項目=utable.$('tr.selected').find("td").eq(カラムインデックス).text();
//選択背景色変更
イベントはこれぐらい覚えておけば
困る事は無いと思います。
■次につまずくのは
カラム毎の編集方法ではないでしょうか?
日付のフォーマットや単位の付加など
細かいところが気になるのが日本人です。
データには無いオブジェクト(ボタン、チェックボックス等)
どうすれば、置けるのか??
公式ページ:https://datatables.net/reference/option/columns
いまいちわかりにくいかな?
まずは、幅等の基本的な指定方法
"columns":[
{ "data":"項目ID","width":"幅","className":"クラス名"}
…
]
項目を編集する場合
"columns":[
{ "data":"kingaku","width":"幅","className":"クラス名"
,render:function( data, type, row ){
//dataに値が入っている
//rowは1行分のオブジェクト
var ret_kingaku=data+row.unit;
return ret_kingaku;
}
}
…
]
"columns":に指定するのは、
AJAX戻り値のJSONの順番にした方が分かりやすいです。
htmlのtableのカラム数と同じでなければ
エラーが出ます。
AJAX戻り値のJSONに項目が存在しない場合の
指定方法
{ "data":null,"width":"幅","className":"クラス名"
,render:function( data, type, row ){
var ret_html="<input type='checkbox' id='"+row.FILE_NAME+"' value='"+row.ID+"'>";
return ret_html;
}
}
上記指定でチェックボックスを置く事が出来ます。
ボタンやリストボックス等自由に配置出来ます。
次回に続く・・・・
出来た事にして
次はイベントを拾いたい
最低限拾いたいイベントは以下
・サーチ実行時
・表示行数変更時
・ページ変更時
・行選択時
公式ページ:https://datatables.net/reference/event/
ここを見れば載っているのですが
実質使うのが上の4つぐらいです。
utable=$('#usrtbl').DataTable();
//サーチ実行時
utable.on( 'search.dt', function () {
…
});
//表示行数変更時
utable.on( 'length.dt', function ( e, settings, len ) {
…});
//ページ変更時
utable.on( 'page.dt', function () {
…
});
//行選択時
$('#usrtbl tbody').on( 'click', 'tr', function () {
//jsonで取得した値取得
var rowData = utable.row(this).data();
項目=rowData['項目ID'];
…
//編集後の項目
項目=utable.$('tr.selected').find("td").eq(カラムインデックス).text();
//選択背景色変更
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}else {
//単一選択の場合は、選択済クラスを消す
utable.$('tr.selected').removeClass('selected');
utable.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
});イベントはこれぐらい覚えておけば
困る事は無いと思います。
■次につまずくのは
カラム毎の編集方法ではないでしょうか?
日付のフォーマットや単位の付加など
細かいところが気になるのが日本人です。
データには無いオブジェクト(ボタン、チェックボックス等)
どうすれば、置けるのか??
公式ページ:https://datatables.net/reference/option/columns
いまいちわかりにくいかな?
まずは、幅等の基本的な指定方法
"columns":[
{ "data":"項目ID","width":"幅","className":"クラス名"}
…
]
項目を編集する場合
"columns":[
{ "data":"kingaku","width":"幅","className":"クラス名"
,render:function( data, type, row ){
//dataに値が入っている
//rowは1行分のオブジェクト
var ret_kingaku=data+row.unit;
return ret_kingaku;
}
}
…
]
"columns":に指定するのは、
AJAX戻り値のJSONの順番にした方が分かりやすいです。
htmlのtableのカラム数と同じでなければ
エラーが出ます。
AJAX戻り値のJSONに項目が存在しない場合の
指定方法
{ "data":null,"width":"幅","className":"クラス名"
,render:function( data, type, row ){
var ret_html="<input type='checkbox' id='"+row.FILE_NAME+"' value='"+row.ID+"'>";
return ret_html;
}
}
上記指定でチェックボックスを置く事が出来ます。
ボタンやリストボックス等自由に配置出来ます。
次回に続く・・・・