技術メモ詳細detail

前回の続き

前回で表示までは、出来ました?
出来た事にして

次はイベントを拾いたい
最低限拾いたいイベントは以下
・サーチ実行時
・表示行数変更時
・ページ変更時
・行選択時

公式ページ: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');
            $(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;
            }
}

上記指定でチェックボックスを置く事が出来ます。
ボタンやリストボックス等自由に配置出来ます。

次回に続く・・・・
 
datatables   2017/12/23   muryoku

前回の続きにコメントを書き込む

Loading...
 画像の文字を入力してください

SITE INFO

サイトロゴ

Welcome !!

夢力のページにようこそ
いらっしゃいました。

業務内容の紹介と技術的メモを
中心に掲載していく
予定にしております。

暖かい目でよろしく
お願いいたします。

4月 2019年5月 6月
   1234
567891011
12131415161718
19202122232425
262728293031

月別アーカイブ一覧



Copyright © Muryoku. All Rights Reserved.