W3.通信

仕事や生活の中で役立つ情報をメモ書きし、よりよい環境構築をサポートするサイト

HTML/CSS

jQueryのDataTablesでリッチなテーブルを使おう

投稿日:

表データを掲載する際にはやはりテーブル要素を使うのが一番適していますね。

昔からソートが出来るテーブル表はありましたがjavascriptで動作させる必要がありました。しかし今はjQueryのプラグインを使うことで簡単に導入する事ができます。

それが「DataTables」です。

dataTablesを使ったテーブル

ソートやフィルタが可能

jQueryプラグインDataTables

HTML テーブルをデータグリッド出来るようにするjQuery のプラグイン。

ソート機能や検索機能を加える

公式URL:http://datatables.net/index

基本導入例

ここでは基本的な動作のみの導入手順を記載していく。

導入サンプル

必要なファイルを読み込ませる

まずはstylesheetとscriptを読み込ませよう。

テーブルデータを作成

テーブルデータを作成。idは「sample_tabledata」とする

手順3

ヘッドタグの下(datatables.min.jsより下)にDataTablesを動かす記述を加える。

以上。これで基本的な動作は問題無い。導入サンプルは非常にシンプルに上の手順で導入したものなので、上手く行かない場合には良く見比べてみよう。

次回以降はオプションの紹介やcolvisを使った列表示の制御方法をまとめる予定

-HTML/CSS
-

Copyright© W3.通信 , 2018 All Rights Reserved Powered by AFFINGER5.