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

datatablesのrenderをカスタマイズ

More than 1 year has passed since last update.

最近datatablesをさわったので今更ながらまとめてみます。

エラーのアラートを無効にする

$.fn.dataTable.ext.errMode = 'none';

日本語化オプション

$.extend( $.fn.dataTable.defaults, {
        language: {
            url: "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
        }
        })

Number helper

{
    data: 'price',
    render: $.fn.dataTable.render.number( ',', '.', 2, '$' )
}

$.fn.dataTable.render.numberというヘルパー関数が用意されています。
使い方は
第一引数が1000ごとの区切り文字列、
第二引数が小数点の表し方、
第三引数は小数点以下第何位まで表示するか。0なら整数。
第四引数は必須ではありませんが、数値の先頭に¥記号や$記号をつけたいときに使います。
Number helper

Number helperを使わないやり方

複数のカラムを使って値や文字列を合成する際はこのように書くこともできます。toFixed(3)で小数点第3位までに丸めています。

{ data: "average",
    render:function(data,type,row){
        var value=data;
        return row.id+'/'+value.toFixed(3);
    }
}

tdタグに動的にクラスを設定する

columnsあるいはcolumnDefsのオプションとして使います。
datatablesで生成されたtdタグ(セル)にclass属性をつけるときに使います。

"createdCell": function (td, cellData, rowData, row, col) {
    if ( rowData.rank==1 ) {
        //rankプロパティが1ならclass="important"を付加する
        $(td).addClass('important')
    }
}

createdCell

ckoshien
フロントエンドエンジニア。ReactJS/NodeJS/NextJS/ReactNative/Java
https://crieit.net/users/ckoshien
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
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
ユーザーは見つかりませんでした