DataTablesのオプションの使い方をご紹介！
DataTablesのオプションの使い方をサンプルコード付きでご紹介します。DataTablesには多くのオプションが存在しています。その中でも特によく用いるものをピックアップしてご紹介します。
DataTablesのオプションの書き方
最初に、DataTablesでオプションを何も使わない場合には以下のように記述します。
オプション無し
$(document).ready(function () {
$("#myTable").DataTable();
});ではオプションがある場合どのように記述するのかというと、以下のように記述します。
オプションあり
$(document).ready(function () {
$("#myTable").DataTable({
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.22/i18n/Japanese.json"
},
info: false,
searching: false
});
});このようにDataTable()のなかにオブジェクト形式でオプションを記述します。
DataTablesのオプションの使い方
では以下のサンプルコードをオプションを用いて変えつつ、そのオプションの機能をそれぞれ解説していきます。
件数変更
件数はデフォルトでは10件からとなります。
ただそれだとページネーションがある意味がなくなってしまうので、lengthMenuというオプションを用いて変更します。
このようにページネーションがうまく機能するようになりました。
lengthMenuオプションには配列で、それぞれ表示させたい件数を記述します。
初期時に特定のカラムでソートさせておく
初期時に「Qumeru」を表示させたいとします。
このようなときに用いるオプションはorderです。
配列で記述し0番目にカラム番号を、1番目にdescまたはascを記述し、降順もしくは昇順にするかを決めます。
このように「Qumeru」が初期時に表示されました。
またorderオプションは複数とることができます。
その場合は以下のように記述します。
orderオプション
"order": [[ 3, 'desc' ], [ 2, 'asc' ]]特定のカラムでのみソートさせる
今回「価格」でのみソートさせるようにしたいと思います。
このような時にはcolumnDefsオプションを用います。
columnDefsオプションでは"orderable": falseと"targets"でソートさせたくないカラム番号を記述します。
このように「価格」でしかソートできない形になりました。
その他
ここまで紹介したオプション以外でよく使うオプションをまとめて紹介します。
| info | フィルター操作時の情報表示を無効にする |
| ordering | 列ソート機能を無効にする |
| paging | ページング機能を無効にする |
| searching | フィルタリング機能を無効にする |
| lengthChange | 1ページングあたりの表示件数変更機能を無効にする |
ではこちらのオプションを用いて1つ目のサンプルコードではページネーション機能と検索機能は必要ではなさそうなので、消してみたいと思います。
このようにソートのみできるテーブルを作成することができました。
まとめ
いかがでしたでしょうか？
ここで紹介したようにDataTablesには多くの便利なオプションが存在しています。
ぜひオプションを用いてオリジナルのテーブルを作成してみてください。
