DataTables の使い方4『テーブルデザイン(スタイリング)』
DataTables の使い方4『テーブルデザイン(スタイリング)』
ということで、今回は 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>
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 | テキストを折り返さない |
列タイトルを折り返したくなければ、"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>
ディスカッション
コメント一覧
まだ、コメントがありません