概要
DataTableに関してはこちらをご覧ください
DataTableは簡単にリッチなテーブルを作れるとあって使っている人も多いのではと思います
今回、こちらのテーブルの行をクリックした時に、そのデータに対応した詳細画面に飛ばしたいという要望が来たので、その時の解決策をメモしておきます
解決策
DataTableライブラリ上で行をカスタマイズするには
'createdRow': function( row, data, dataIndex ) {
// 任意のコードを記述
// $(row)にて行を構成するHTML要素にアクセス可能
},
でできるみたいです
createdRow以外にもcreatedCellもあるみたいですね
行全体をクリック可能にするためにはtr要素にclick時の挙動を記述して、カーソルが行の上に来た時に変化できるようにCSSを追加しておけば良さそうです
$('#table1').DataTable({
...
// このajaxの返り値でhoge_idをもらっておく
// 以下のライブラリを使うとcontrollerのコーディングが楽になる
// https://github.com/yajra/laravel-datatables
ajax: {
type: 'GET',
url: '/path/to/api',
data: {
...
}
},
// 行を選択した時にurfFormに飛ぶ
'createdRow': function( row, data, dataIndex ) {
// data-hrefにURLを追加してから、クリック時にそちらへ遷移させる
var urlForm = "/path/to/link/" + data.hoge_id;
$(row).attr('data-href', urlForm)
// カーソールオーバー時の見た目を変化
.css("cursor", "pointer")
// クリックしたら遷移
.click(function(e) {
window.location = $(e.target).closest('tr').data('href');
});
},
...
});