DataTablesの使い方

DataTablesは表の見栄えを綺麗にしたり、ソートや検索が使えるようになるjQueryのプラグインです。本ページではDataTablesのダウンロード方法や使い方について説明しています。

DataTablesの概要

 DataTablesは表を綺麗に見せるだけでなく、ABC順等でソートしたり、単語にマッチした行だけ表示する検索等の機能を持ったプラグインです。

 以下の例では左上のShow部分の数字を変更する事で表示する行数を変更出来ます。又、青字のヘッダー部分をクリックする事でクリックした列の昇順、もう1度クリックすると降順にソートされ、Search部分に文字や数字を入力するとヒットした行だけ表示されます。

【Data Tables例】
会社 商品 価格 送料
A社 テント 20,000 5,000
A社 ランタン 10,000 2,000
A社 タープ 10,000 2,000
A社 テーブル 5000 1,000
B社 テント 30,000 1,000
B社 ランタン 12,000 1,000
B社 タープ 12,200 900
B社 テーブル 900 200
C社 テント 30,000 3,000
C社 ランタン 1,500 1,500
C社 タープ 7,500 500
C社 テーブル 1,700 600
D社 テント 10,000 1000
D社 ランタン 2,000 200
D社 タープ 3,300 230
D社 テーブル 2,300 210
E社 ランタン 2,000 400
E社 グランドシート 2,000 240


 DataTablesはMIT Lisenceというライセンスを採用していて、自由にダウンロードして無料で利用出来ます。

DataTablesのダウンロードと導入

 DataTablesは「DataTables」で左サイドバーにある「Download」を選択し、「Download DataTables」ボタンをクリックする事でダウンロード出来ます。ダウンロード後は圧縮されているため解凍が必要です。

 解凍したファイルの中には以下が含まれています。

・media\css\jquery.dataTables.css
 スタイルシートです。サーバーのスタイルシートを配置するディレクトリにアップロードします。
・media\imagesフォルダ
 DataTablesで使うイメージが保存されたフォルダです。なくても動作しますが、アイコン等で表示されると見栄えが良いためサーバーのスタイルシートを配置するディレクトリの親ディレクトリにフォルダ毎アップロードします。つまり、サーバーのスタイルシートを配置するディレクトリの親ディレクトリにimagesディレクトリが出来、そのディレクトリにイメージが保存される事になります。
 又、スタイルシートの中身を編集してimagesディレクトリの位置を変更する事も可能です。NoEditor等を使ってjquery.dataTables.cssを開き、imagesの文字列を検索、配置したいディレクトリ名に置換します。
・media\js\jquery.dataTables.min.js
 DataTablesのJavaScriptです。サーバーのJavaScriptを配置するディレクトリにアップロードします。

 アップロード後、「jQueryの利用」でプラグインを利用出来るようになっている場合は、<head>と</head>の間に以下の記述を追加してアップロードしたファイルを読み込ませます。

【DataTablesを利用するためのhead内記述例】
<script src="js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="css/jquery.dataTables.css" />

 赤字部分はJavaScriptとスタイルシートを保存したディレクトリに合わせて修正して下さい。

 又、スクリプトとして<head>と</head>の間に以下の記述を追加します。

【DataTables利用のためのスクリプト例(DataTablesから引用)】
<script>
$(document).ready(function(){
    $('#myTable').DataTable();
});
</script>

 <body>と</body>の間で以下のように表を挿入すると記述した部分に表が表示されます。

【DayaTablesでの表の挿入】
<table cellpadding="0" cellspacing="0" border="0" class="display" id="myTable">
<thead>
  <tr>
    <th>会社</th>
    <th>商品</th>
    <th>価格</th>
    <th>送料</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>A社</td>
    <td>テント</td>
    <td>20,000</td>
    <td>5,000</td>
  </tr>
  <tr>
    <td>A社</td>
    <td>ランタン</td>
    <td>10,000</td>
    <td>2,000</td>
  </tr>
・・・以下同じ
</tbody>
</table>

 <th>や<td>タグで囲まれた部分はヘッダーとデータなので記述する内容に合わせて編集して下さい。表の作り方については「表の挿入」をご参照下さい。

 尚、表の挿入では説明していない<thead>と<tbody>タグを使っています。それぞれヘッダーとデータを囲むようにして使いますが、少なくとも<thead>タグを使わないとDataTablesは動作しません。

DataTablesのオプション

 以下のようにデータを全て表示し、左上の行数変更、右下の「Next」や「Previous」、左下の何ページ目か等のインフォメーション表示を無効にする事も出来ます。

【Data Tablesで一部機能を無効にした例】
会社 商品 価格 送料
A社 テント 20,000 5,000
A社 ランタン 10,000 2,000
A社 タープ 10,000 2,000
A社 テーブル 5000 1,000
B社 テント 30,000 1,000
B社 ランタン 12,000 1,000
B社 タープ 12,200 900
B社 テーブル 900 200
C社 テント 30,000 3,000
C社 ランタン 1,500 1,500
C社 タープ 7,500 500
C社 テーブル 1,700 600
D社 テント 10,000 1000
D社 ランタン 2,000 200
D社 タープ 3,300 230
D社 テーブル 2,300 210
E社 ランタン 2,000 400
E社 グランドシート 2,000 240

 指定はオプションで行います。以下はオプションの例で、それぞれの説明とデフォルトの設定を示します。オプションはこれ以外にも多数あります。

【DataTablesオプションの説明】
オプション 説明 デフォルト
paging falseにすると全データが表示されて、ページ切替が表示されなくなります。 true
lengthChange falseにすると左上のShowが表示されません。 true
searching falseにすると検索ボックスが表示されません。 true
ordering flaseにするとヘッダーをクリックしてもソート出来ません。 true
info falseにすると左下のインフォメーションが表示されません。 true
order ページが表示された時にソートする列を指定します。 [[0, 'asc']]

 オプションはスクリプトに追加して記述し、複数オプションを指定する場合は「,」で区切って記述します。例で示した表では、以下赤字部分のようにオプションを追加しています。

【オプションの指定例】
<script>
$(document).ready(function(){
    $('#myTable').dataTable( {
        "paging": false,
        "lengthChange": false,
        "searching": true,
        "ordering": true,
        "info": false}
);} );
</script>

 ソートや検索は有効にし、ページ切替が不要なように全データを表示するようにしています。又、左下に表示される何ページ目か等のインフォメーションも無効にしています。

 又、orderは以下のように[[1, 'asc']]と指定すると2列目をソートして初期表示します。

【orderの指定例】
<script>
$(document).ready(function(){
    $('#myTable').dataTable( {
        "order": [[1, 'asc']]} );} );
</script>

 赤字部分はソートする列で0が1列目を示し、1が2列目を示します。

 デフォルトではページが表示される時に1列目でソートされるため、ソートしたくない場合は"order": []と指定します。

複数個所での利用

 DataTablesを1ページ2箇所以上で利用する場合、スクリプトを以下赤字部分のように書き換えて追加します。

【複数個所で利用する場合のスクリプト】
<script>
$(document).ready(function(){
    $('#myTable2').dataTable( {
        "paging": false,
        "lengthChange": false,
        "searching": false,
        "ordering": false,
        "info": false} );} );
</script>

 上記では検索やソート等のオプションも無効にしていますが、利用する機能に合わせて設定を変更して下さい。

 又、<body>と</body>の間で2箇所目は以下のように記述します。

【複数個所で利用するためのbody内html例】
<table cellpadding="0" cellspacing="0" border="0" class="display" id="myTable2">
<thead>
  <tr>
    <th>会社</th>
    <th>商品</th>
    <th>価格</th>
    <th>送料</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>A社</td>
    <td>テント</td>
    <td>20,000</td>
    <td>5,000</td>
  </tr>
・・・以下同じ
</tbody>
</table>

 赤字部分を合わせる事でスクリプトと表が対応付けられます。

 このため、オプションを変えて1ページ内に異なる動作をする複数の表が作成出来ます。

サイト関連1

ホームページ作成「jQueryの利用
ホームページ作成「表のスマートフォン対応
jQueryプラグインの使い方
jQueryプラグイン「CompareWYWの使い方
jQueryプラグイン「Colorboxの使い方
jQueryプラグイン「Nivo Sliderの使い方
jQueryプラグイン「SuperScrollorama
jQueryプラグイン「ScrollMagicの使い方
  • このエントリーをはてなブックマークに追加