table fixed headerプラグイン
table fixed headerプラグインは、簡単なテーブル構成で作成したデータを、グリッド形式で表示するプラグインです。このプラグインを使うことで、データのソートやページングなどを簡単に適用させることができます。
プラグイン適用後を図1に示します。
図1 table fixed headerプラグイン適用後
また、列2に対してデータのソートを行った場合を図2に、列2の列幅を変更した場合を図3に示します。
図2 table fixed headerプラグイン適用後（列2でソーティング）
図3 table fixed headerプラグイン適用後（列2の列幅を変更）
「table fixed header」のサイトからjquery.fixheadertable-2.0.zipをダウンロードし、解凍後にpluginフォルダ下に配置します。
リスト1にtable fixed headerプラグインの使用例を示します。
リスト1 table fixed headerプラグインの使用例（jQueryPlugin_fixheadertable.html）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQueryプラグイン（table fixed header) サンプル</title>
<!--1.jQueryの読み込み-->
<script type="text/javascript" src="Scripts/jquery-1.6.1.min.js"></script>
<!--2.プラグインの読み込み-->
<script type="text/javascript" src="plugins/jquery.fixheadertable-2.0/javascript/jquery.fixheadertable.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.13.custom/js/jquery-ui-1.8.13.custom.min.js"></script>
<!--3.CSSの設定-->
<link rel="stylesheet" type="text/css" href="plugins/jquery.fixheadertable-2.0/css/base.css" />
<link rel="stylesheet" type="text/css" href="Scripts/jquery-ui-1.8.13.custom/css/ui-lightness/jquery-ui-1.8.13.custom.css" />
<!--4.プラグインの設定-->
<script type="text/javascript">
$(function () {
$('.sampletabale').fixheadertable({
caption: 'キャプションを指定する ',
height: 200,
width: 450,
zebra: true,
resizeCol: true,
minColWidth: 50,
colratio: [100, 150, 200],
sortable: true,
sortType: ['integer', 'string', 'string'],
pager: true,
rowsPerPage: 10
});
});
</script>
</head>
<body>
<h1>jQueryプラグイン（table fixed header) サンプル</h1>
<table class="sampletabale">
<thead>
<tr><th>列1</th><th>列2</th><th>列3</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>YYY</td><td>ZZZ</td></tr>
(中略）
<tr><td>15</td><td>YYY</td><td>ZZZ</td></tr>
</tbody>
</table>
</body>
</html>
table fixed headerプラグインを使用するには、jquery.fixheadertable.min.jsを読み込み、「4.プラグインの設定」のように、表示領域のclass属性を指定し、fixheadertableメソッドを使用します。ページング機能を追加した場合などで、テーブルの外観にjQuery-UIを使用しているため、加えてjquery-ui-X.X.X.custom.min.jsとjquery-ui-X.X.X.custom.cssを読み込んでください。執筆時点のjQuery UIの最新版は、1.8.13です。jQuery UIのサイトからダウンロードしてください。
fixheadertableメソッドのオプションでは、ソートやページング、データフォーマットなどを指定します。表示領域で、列名はtheadタグで指定し、データに当たる部分はtbodyタグを使用します。fixheadertableメソッドの主なオプションを表2に示します。
表2 fixheadertableメソッドのオプション
| オプション名 | 概要 | デフォルト |
| caption | キャプション | ' ' |
| height | テーブルの高さ | null |
| width | テーブルの幅 | null |
| zebra | 行のスタイルを置き換えるか。true／false | false |
| resizeCol | カラム幅が可変か。true／false | false |
| minColWidth | カラムの最小幅 | 100 |
| colratio | カラム幅の割合 | [] |
| sortable | ソートするか。true／false | false |
| sortType | ソート時の型。float／integer／date／string | [] |
| pager | ページングするか。true／false | false |
| rowsPerPage | 1ページに表示する行数 | 10 |
