HTML テーブルをナイスに扱う DataTables 〜ThemeRoller編〜


前回からの続き。。
DataTables によるHTMLテーブルは jQuery の ThemeRoller に対応している。

最初は、

HTML のテーブルは前回の状態から、

<head>
  ・・・
  <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
  <!-- jQuery -->
  <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
  <!-- DataTables -->
  <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
  <script>
  $(document).ready(function(){
    $('#table_id').dataTable();
  });
  </script>
  ・・・
</head>
<body>
<table id="table_id">
    <thead>
        <tr><th>Column 1</th><th>Column 2</th><th>etc</th></tr>
    </thead>
    <tbody>
    	<tr><td>Row 0 Data 1</td><td>Row 0 Data 2</td><td>etc</td></tr>
        <tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>etc</td></tr>
        ・・・
        <tr><td>Row B Data 1</td><td>Row B Data 2</td><td>etc</td></tr>
    </tbody>
</table>
</body>
</html>


見た目はこんな感じ


ThemeRoller サポートの有効化

DataTables で、JQueryUI のサポートを有効化する。

  <script>
  $(document).ready(function(){
    $('#table_id').dataTable( {
      "bJQueryUI": true
    });
  });
  </script>


ThemeRoller の適用のためには、 DataTables 用の追加のCSS(jquery.dataTables_themeroller.css)が必要になる。MS の CDN にて24種類ほどテーマと合わせて公開されているので今回はそちらを利用する。

http://www.asp.net/ajaxlibrary/CDNjQueryUI190.ashx


CSS の定義はこんな感じ。

  <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables_themeroller.css">
  <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.0/themes/flick/jquery-ui.css">


テーマ適用後



テーマを変えてみる。

  <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.0/themes/mint-choc/jquery-ui.css">


ページネーションタイプの変更

ページネーションタイプを変更してみる。

  <script>
  $(document).ready(function(){
    $('#table_id').dataTable( {
      "bJQueryUI": true,
      "sPaginationType": "full_numbers"
    });
  });
  </script>

こんな感じ。