DataTables の使い方4『テーブルデザイン(スタイリング)』

Java Script

DataTables の使い方4『テーブルデザイン(スタイリング)』
ということで、今回は datatables で用意されているスタイリングオプション(テーブルデザイン)を設定します。

datatables のコードはオプション無し、テーブルは これまで使ってきた ものを流用します。

関連Datatables の使い方総合

準備

datatables のスクリプトとCSSを head 内に設置します。スクリプトは body 最後でも構いませんが、順序には気を付けてください。

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
 <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
サンプルテーブルHTML
<table id="myTable">
<thead>
<tr>
<th>年</th>
<th>出生率</th>
<th>合計特殊出生率</th>
<th>出生数</th>
</tr>
</thead>
<tbody>
<tr>
<td>1997</td>
<td>9.5</td>
<td>1.39</td>
<td>1191665</td>
</tr>
<tr>
<td>1998</td>
<td>9.6</td>
<td>1.38</td>
<td>1203147</td>
</tr>
<tr>
<td>1999</td>
<td>9.4</td>
<td>1.34</td>
<td>1177669</td>
</tr>
<tr>
<td>2000</td>
<td>9.5</td>
<td>1.36</td>
<td>1190547</td>
</tr>
<tr>
<td>2001</td>
<td>9.3</td>
<td>1.33</td>
<td>1170662</td>
</tr>
<tr>
<td>2002</td>
<td>9.2</td>
<td>1.32</td>
<td>1153855</td>
</tr>
<tr>
<td>2003</td>
<td>8.9</td>
<td>1.29</td>
<td>1123610</td>
</tr>
<tr>
<td>2004</td>
<td>8.8</td>
<td>1.29</td>
<td>1110721</td>
</tr>
<tr>
<td>2005</td>
<td>8.4</td>
<td>1.26</td>
<td>1062530</td>
</tr>
<tr>
<td>2006</td>
<td>8.7</td>
<td>1.32</td>
<td>1092674</td>
</tr>
<tr>
<td>2007</td>
<td>8.6</td>
<td>1.34</td>
<td>1089818</td>
</tr>
<tr>
<td>2008</td>
<td>8.7</td>
<td>1.37</td>
<td>1091156</td>
</tr>
<tr>
<td>2009</td>
<td>8.5</td>
<td>1.37</td>
<td>1070035</td>
</tr>
<tr>
<td>2010</td>
<td>8.5</td>
<td>1.39</td>
<td>1071304</td>
</tr>
<tr>
<td>2011</td>
<td>8.3</td>
<td>1.39</td>
<td>1050806</td>
</tr>
<tr>
<td>2012</td>
<td>8.2</td>
<td>1.41</td>
<td>1037231</td>
</tr>
<tr>
<td>2013</td>
<td>8.2</td>
<td>1.43</td>
<td>1029816</td>
</tr>
<tr>
<td>2014</td>
<td>8.0</td>
<td>1.42</td>
<td>1003539</td>
</tr>
<tr>
<td>2015</td>
<td>8.0</td>
<td>1.45</td>
<td>1005677</td>
</tr>
<tr>
<td>2016</td>
<td>7.8</td>
<td>1.44</td>
<td>976978</td>
</tr>
</tbody>
</table>

もっと大きな表で試したければ、こちらからコピペして、テーブル id を変更して使ってください。

コード(ページ送り
<script>
jQuery(function($){
$.extend( $.fn.dataTable.defaults, {
 language: {
 url: "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
 } 
 }); 
$('#myTable').DataTable({});
});
</script>
 

Class の設定

スタイリングオプションは table タグの class=” ” で設定します。

デザインは WordPress テーマやブログサービスによって定義されていることがあるため、無効になることがあります。

オプション デフォルト値
display  下に記載している stripe, hover, row-border, order-column クラスを一括適用
cell-border セルのすべての辺のボーダ(罫線)を表示
compact セル内の余白を小さくし、情報量を増やす
hover マウスオーバー(マウスカーソルが乗った時)にその行の色を変える
nowrap セル内の折返しを禁止(テーブルセル内を1行で表示)
order-column 並べ替えた列を強調表示する
row-border ボーダーラインを上と下にだけ表示させる(シンプル罫線)
stripe 行をストライプ表示(奇数・偶数行ごとに色を変える)

基本的な書き方

<table id="myTable" class"display">

複数指定

<table id="myTable" class"display compact">

ボタンを押してスタイルを確認

ボタンを押すとそれぞれのスタイルを確認できます
テーブルクラス:

出生率 合計特殊出生率 出生数
1997 9.5 1.39 1191665
1998 9.6 1.38 1203147
1999 9.4 1.34 1177669
2000 9.5 1.36 1190547
2001 9.3 1.33 1170662
2002 9.2 1.32 1153855
2003 8.9 1.29 1123610
2004 8.8 1.29 1110721
2005 8.4 1.26 1062530
2006 8.7 1.32 1092674
2007 8.6 1.34 1089818
2008 8.7 1.37 1091156
2009 8.5 1.37 1070035
2010 8.5 1.39 1071304
2011 8.3 1.39 1050806
2012 8.2 1.41 1037231
2013 8.2 1.43 1029816
2014 8.0 1.42 1003539
2015 8.0 1.45 1005677
2016 7.8 1.44 976978

 

列ごとにスタイル・プロパティを設定する

特定の列にだけスタイル・プロパティを適用したい時はcolumnDefsを使う。
targets:[列番号]。0から始まります。複数指定は “,” カンマ で。全部指定するなら “_all” で。

$('#myTable2').DataTable({
columnDefs: [
{targets: [0, 1], visible: true},
{targets: '_all', visible: false }
],
});

左から順に埋めていくなら “columns” を使う。左から順に全て満たす必要があります。特に指定しないなら “null” すればデフォルト設定になります。

"columns": [
    { "searchable": false },
    null,
    null,
    null,
    null
  ]


上のコードは1行目だけ検索対象から外し、2~5列はスタイル・プロパティの指定なしにしたもの。
 

セルのスタイリング(中寄せ右寄せ)

セル内のテキスト配置を列ごとに設定できます。

オプション 意味
dt[-head|-body]-left テキスト左寄せ
dt[-head|-body]-center テキスト中寄せ
dt[-head|-body]-right テキスト右寄せ
dt[-head|-body]-justify テキスト均等揃え
dt[-head|-body]-nowrap テキストを折り返さない
[]内はオプションなので、どちらか一方のみにしたい時に使います。head は thead 内、body は tbody 内に適用されます。

列タイトルを折り返したくなければ、”dt-head-nowrap”、列データを右寄せにするなら “dt-body-right” とします。

 

使い方

“columnDefs” や “columns” を使って、クラス名に “dt-body-nowrap” の形で指定します。

"columnDefs": [
 { className: "dt-head-nowrap", "targets": [ 0 ] }
 ]

個別の列に対して指定するので、すべてに適用したい時は ‘_all’ を用います。
 

補足

スタイリングオプションのクラスは自分でも設定できますが、Wordpress のテーマやブログサービスによっては、初期スタイルを否定する必要があります。

WordPress テンプレート ”Luxeritas” であれば、.post table の border を解除しないと、ボーダー罫線のオプションは機能しません。

Luxeritas でボーダーを解除

<style>.post table{border:none;}.post td{border:none;}.post th{border:none;}</style>

 

関連Datatables の使い方総合