Help us understand the problem. What is going on with this article?

【Rails】 DataTables 動的にカラムを変更する方法

はじめに

Railsアプリケーションで DataTables を使う方法を以前にまとめさせていただきました。
DataTables を使ったテーブルのカラムを動的に変更したい需要があると思いますが、まとめられている記事を見かけませんでしたので、こちらにてまとめさせていただきます。
この方法を理解していれば、開発時間を極端に減らして高機能なテーブルを提供することができます。

なお、今回の方法は少し強引にカラムを動的に変更しています。
もし、もっといい方法があるということをご存知の方はコメントをいただければ嬉しいです。

関連リンク

関連リンクを下記に載せておくので、必要であれば参考にしてください。。

動的にカラムを変更する方法

前提条件

下記リンクにてDataTablesを実装していること。
このリンク先のコードを元にして、動的にカラムを変更する方法をこちらの記事にて特記したいと思います。

値を変更する方法

動的にカラムを変更するには、users.coffeeのコードを変更することによって可能です。

ここでは一例として、id が 3 のときに"あほ"を表示するコードを書いています。

app/assets/javascripts/users.coffee
$ ->
  # *** 省略 ***

  # 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を埋め込んでいるだけとなります。(少し強引かもしれません。。)

app/assets/javascripts/users.coffee
$ ->
  # *** 省略 ***
    # 以下に注目
    { 
      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を付与しているだけとなります。

app/assets/javascripts/users.coffee
$ ->
  # *** 省略 ***
    # 以下に注目
    { 
      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 だとドキュメントが英語で読みづらいし、あまり柔軟性がないと考える方もいると思います。
少し強引ではありますが、このような感じで色々な応用をすることも可能ですので、ご自身で色々と試してみるのもいいかもしれません。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした