はじめに
Railsアプリケーションで DataTables を使う方法を以前にまとめさせていただきました。
DataTables を使ったテーブルのカラムを動的に変更したい需要があると思いますが、まとめられている記事を見かけませんでしたので、こちらにてまとめさせていただきます。
この方法を理解していれば、開発時間を極端に減らして高機能なテーブルを提供することができます。
なお、今回の方法は少し強引にカラムを動的に変更しています。
もし、もっといい方法があるということをご存知の方はコメントをいただければ嬉しいです。
関連リンク
関連リンクを下記に載せておくので、必要であれば参考にしてください。。
- 【Rails】 DataTables 検索結果の保持方法
動的にカラムを変更する方法
前提条件
下記リンクにてDataTablesを実装していること。
このリンク先のコードを元にして、動的にカラムを変更する方法をこちらの記事にて特記したいと思います。
- 【Rails】DataTables 実装方法
値を変更する方法
動的にカラムを変更するには、users.coffeeのコードを変更することによって可能です。
ここでは一例として、id が 3 のときに"あほ"を表示するコードを書いています。
$ ->
# *** 省略 ***
# user_table へカラムを追加する
user_table.setColumns([
# 以下に注目
{
data: 'id', title: 'ユーザID', width: '5%'
# 以下を追記
render: (data, type, row) ->
# data / type / row にどんなデータが入っているか確認。
console.log data
console.log type
console.log row
if data == "3"
"あほ"
},
{ data: 'username', title: 'ユーザ名', width: '25%' },
{ data: 'name', title: '名前', width: '30%' },
{ data: 'created_at', title: '登録日時', width: '20%' },
{ data: 'updated_at', title: '更新日時', width: '20%' },
])
# *** 省略 ***
フォントを変更する方法
つづいて、フォントを変更する方法を紹介します。
一例として、id が 3 のときに赤色の文字で"あほ"と表示するコードを書いています。
htmlタグを使ってそこにcssを埋め込んでいるだけとなります。（少し強引かもしれません。。）
$ ->
# *** 省略 ***
# 以下に注目
{
data: 'id', title: 'ユーザID', width: '5%'
# 以下を追記
render: (data, type, row) ->
if data == "3"
"<span style='color: red;'>あほ</span>"
},
# *** 省略 ***
Bootstrap のレイアウトを導入する
最後に応用技として、 Bootstrap のレイアウトを導入する方法を紹介します。
一例として、id が 3 のときに赤色の文字で"あほ"と表示するコードを書いています。
応用と書きましたが、htmlタグを使ってbootstrapで使用できるclassを付与しているだけとなります。
$ ->
# *** 省略 ***
# 以下に注目
{
data: 'id', title: 'ユーザID', width: '5%'
# 以下を追記
render: (data, type, row) ->
if data == "3"
"<div><center><span class='label label-default'>あほ</span></center></div>"
},
# *** 省略 ***
まとめ
いかがでしょうか。Railsなので動的に値を変更したい需要はかなりあるかと思いますが、DataTables だとドキュメントが英語で読みづらいし、あまり柔軟性がないと考える方もいると思います。
少し強引ではありますが、このような感じで色々な応用をすることも可能ですので、ご自身で色々と試してみるのもいいかもしれません。