★ 今日はこんな記事も読まれています ★

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

2018年5月6日Java Script

DataTables の使い方４『テーブルデザイン(スタイリング)』
ということで、今回は 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セル内の折返しを禁止（テーブルセル内を１行で表示）
order-column並べ替えた列を強調表示する
row-borderボーダーラインを上と下にだけ表示させる（シンプル罫線）
stripe行をストライプ表示（奇数・偶数行ごとに色を変える）

基本的な書き方

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

複数指定

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

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

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

年出生率合計特殊出生率出生数
19979.51.391191665
19989.61.381203147
19999.41.341177669
20009.51.361190547
20019.31.331170662
20029.21.321153855
20038.91.291123610
20048.81.291110721
20058.41.261062530
20068.71.321092674
20078.61.341089818
20088.71.371091156
20098.51.371070035
20108.51.391071304
20118.31.391050806
20128.21.411037231
20138.21.431029816
20148.01.421003539
20158.01.451005677
20167.81.44976978

 

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

特定の列にだけスタイル・プロパティを適用したい時は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
  ]


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

セルのスタイリング（中寄せ右寄せ）

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

オプション意味
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 の使い方総合

Java Script