読者です 読者をやめる 読者になる 読者になる

おっちゃんあんちゃんの覚書

熱帯魚飼育を中心にブログを書いています。失敗談の方が多くて・・・。

ちょっとおしゃれな表の作り方

ノウハウ-ブログのカストマイズ ノウハウ

今日は、『年表(年月日表)』や『水質状況』で利用しているjQueryプラグインの"DataTables"を紹介します。

2016/3/18 追記 DataTables用のCSS設定を追加しました。

表を書くときは、table要素を使用します

ブログの中で表を書くには、HTMLのtable要素を使用します。はてなブログの場合には”はてな記法”を使用すると簡単に表を書けるようです。実は私、はてな記法をよく知らず、毎回HTMLで直接書いていました。

"DataTables"を利用するときにもHTML表示を使います。とは言っても一瞬ですので、ご安心下さい。

DataTablesとは

f:id:tk450:20160314235004p:plain

このプラグインを使用すると、table要素を拡張して、列の並べ替えや一定行数ごとに表示することが出来るようになります。表として書いた本文は、そのままで大丈夫です。何を言っているか分からん!!という方は、だまされたと思って、まずは下記の記事をご覧下さい。

tk450.hatenablog.com

設定方法

はてなブログで実際に設定する方法です。

まずは、DataTables用のCSSを設定します。これは、1度だけ行えば良いです。

”ダッシュボード→設定→詳細設定→headに要素”を選んで、次の1行を追加します。

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" />

次に、記事の中で表を書きます。はてな記法でもHTMLでもどちらでも良いです。

(例)

No内容
1 テスト1
2 スト2
3 テスト3

書き終わったらHTMLを表示して、作成した表を表すtable要素の<table> 内にid="xxxxxx"を追加しておきます。classやwidthと書かれた緑色部分は、そのままコピペして下さい。

f:id:tk450:20160314230254p:plain

<table id="xxxxxx" class="display" width="100%" cellspacing="0">
<thead>
<tr><th>No</th><th>内容</th></tr>
</thaed>
<tbody>
<tr>
<td>1</td>
<td>テスト1</td>
</tr>
<tr>
<td>2</td>
<td>テスト2</td>
</tr>
<tr>
<td>3</td>
<td>テスト3</td>
</tr>
</tbody>
</table>。

次に、HTML表示のまま、文章の最後に下記のコードをコピペします。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">// <![CDATA[
(function($) {
$(function() {
$("#xxxxxx").dataTable( {
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
}
} );
});
})(jQuery);
// ]]></script>

コピペした赤文字のxxxxxxを、先程追加したtable要素のid="xxxxxx"と同じ文字列になるように修正したら完成です。ブログを保存するか、プレビューで見てみてください。

このid="xxxxxx"のxxxxxx部分は、ブログ内の全ての表でユニーク(同じ文字列がない)状態にする必要があります。私の場合には、年表には"chronology"を、水質状況には"testpaper"と言う文字列を使用しています。

ちょっと応用編

記事が沢山あって面倒臭いと思われる方は、下記のコードをコピペして全てのtable要素に適用しても良いかもしれません。このコードを利用した場合、table要素にid="xxxxxx"を追加する必要がありません。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">// <![CDATA[
(function($) {
$(function() {
$("table").dataTable( {
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
}
} );
});
})(jQuery);
// ]]></script>

ただ、一部のアドセンスにtable要素が使われているので上記のコードでは問題が発生する可能性があります。そこで、記事本文中の表だけを対象にしたい場合は、table要素にclassとして指定する方が良いかも知れません。classは、同じ文字列でも問題がありませんので、今まで使ったidはなんでっけ?なんて気にする必要がありません。

<table class="dtable display" width="100%" cellspacing="0">
<thead>
<tr><th>No</th><th>内容</th></tr>
<thead>
<tbody>
<tr>
<td>1</td>
<td>テスト1</td>
</tr>
<tr>
<td>2</td>
<td>テスト2</td>
</tr>
<tr>
<td>3</td>
<td>テスト3</td>
</tr>
</tbody>
</table>

このときの文末にコピペするコードは、下記のとおりです。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">// <![CDATA[
(function($) {
$(function() {
$(".dtable").dataTable( {
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json" }
} );
});
})(jQuery);
// ]]></script>

ちなみに私はブログ全体で表が3つしかないので、1つ1つの表にidを使っています。

ご参考までに、年月日表の表(table要素)と文末のコードを載せておきます。まずは、表です。

<table id="chronology" class="display zoomchronology" width="100%" cellspacing="0"><caption>【年表(年月日表)】</caption>
<thead>
<tr><th>年月日</th><th>イベント</th><th>RP</th><th>CT</th><th>計</th></tr>
</thead>
<tbody>
<tr>
<td><span style="color: #ffffff;">16/</span>03/13</td>
<td>流動ろ材用自作ケースの改良。</td>
<td class="ac">5</td>
<td class="ac">7</td>
<td class="ac">12</td>
</tr>
<tr>
<td><span style="color: #ffffff;">16/</span>03/12</td>
<td><a href="http://tk450.hatenablog.com/entry/2016/03/12/173702">三番子をショップに</a>。<a href="http://tk450.hatenablog.com/entry/2016/03/13/170255">フネアマ貝</a>。</td>
<td class="ac"><span style="color: #ff0000;">5</span></td>
<td class="ac">7</td>
<td class="ac">12</td>
</tr>
</tbody
</table>

次に文末にコピペするコードです。今まで紹介してきた内容と、ちょっとだけ違います。スミマセン。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">// <![CDATA[
(function($) {
$(function() {
$("#chronology").dataTable( {
"searching": false,
"order": 0, "desc" ,
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
}
} );
});
})(jQuery);
// ]]></script>

まとめ(みなさんもいかがですか?)

うまく表示されましたか?

とっても簡単に拡張できますので、表を使われている方は是非とも試してみて下さい。 

なお本日の記事は、下記ブログを参考にさせていただきました。ありがとうございます。

motagp.hatenablog.com

また、"DataTable"の詳しい内容を知りたい方は、こちらのページをご覧下さい。

https://datatables.net/

follow us in feedly rss