ちょっとおしゃれな表の作り方 - おっちゃんあんちゃんの覚書

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

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

表を書くときは、table要素を使用します
DataTablesとは
設定方法
ちょっと応用編
まとめ（みなさんもいかがですか？）

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

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

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

DataTablesとは

f:id:tk450:20160314235004p:plain

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

tk450.hatenablog.com

設定方法

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

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

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

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

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

（例）

No	内容
1	テスト１
2	テスト２
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>テスト１</td>
    </tr>
    <tr>
      <td>2</td>
      <td>テスト２</td>
    </tr>
    <tr>
      <td>3</td>
      <td>テスト３</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>テスト１</td>
  </tr>
  <tr>
    <td>2</td>
    <td>テスト２</td>
  </tr>
  <tr>
    <td>3</td>
    <td>テスト３</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>

ちなみに私はブログ全体で表が３つしかないので、１つ１つの表に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>