エンジニアのひよこ_level10

【毎日更新!】新卒3年目エンジニアブログです!

【JavaScript】tableタグの中身の、検索やソートが出来るプラグイン【890日目】

テーブルのソートとかをしたい

テーブルタグがあって、それのソートや検索をしたい。

普通に実装すると、まーーーあ大変。
一個一個作って、しかもバグとか起こったら辛い。

なので、プラグインとか使おう

DataTables

datatables.net

使い方

  1. jQueryとDataTablesを読み込む
  2. 対象テーブルにDataTables関数を使う

これで良い。

1. jQueryとDataTablesを読み込む

CDN(事前に公式が用意したURL)をスクリプトタグに書くだけで実装可能。簡単。

あるいは、ダウンロードして、プロジェクトに組み込むのもあり。
通信が閉じられてる環境や、外部サーバーが死んだら困るってことで手元にあったほうが良い時とか。

2. 対象テーブルにDataTables関数を使う

$('#table-id').DataTable();

こんな感じに書くだけで変更可能。

画面を描写した時点でDataTableの方が良いのであれば、

$(document).ready( function () {
    $('#table-id').DataTable();
} );

とかでも良い。

せっかく便利な世の中になったので、先人の作った便利なものを使って車輪の再発明を避けましょうφ(・