DataTablesのオプションの使い方をご紹介!

DataTablesのオプションの使い方をサンプルコード付きでご紹介します。DataTablesには多くのオプションが存在しています。その中でも特によく用いるものをピックアップしてご紹介します。

コンテンツ [表示]

  1. 1DataTablesのオプションの書き方
  2. 2DataTablesのオプションの使い方
  3. 2.1件数変更
  4. 2.2初期時に特定のカラムでソートさせておく
  5. 2.3特定のカラムでのみソートさせる
  6. 2.4その他
  7. 3まとめ

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には多くの便利なオプションが存在しています。

ぜひオプションを用いてオリジナルのテーブルを作成してみてください。

【期間限定】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

西村卓也
ライター

西村卓也

HTML/CSS/JSに関する記事を執筆しています。よろしくお願いします。