PR

ソート対応のリッチなグリッド表を生成する
TableFixedHeader

[URL]http://www.tablefixedheader.com/
[必要なファイル]jquery.fixheadertable.min.js、base.css、jQuery UI(jquery-ui-1.8.16.custom.min.js、jquery-ui-1.8.16.custom.css)

ソート/ページングに対応したグリッド表
ソート/ページングに対応したグリッド表
[画像のクリックで拡大表示]

 TableFixedHeaderは、ソートやページング、タイトル行固定などに対応したリッチなグリッド表を生成するプラグインです。jQuery UIの機能も利用しているので、インポートしなければならないファイルがやや複雑ですが、そこさえクリアーしてしまえば、とても便利なプラグインです。

リスト1●fixedheadertable.html
リスト1●fixedheadertable.html
[画像のクリックで拡大表示]

 リスト1は、TableFixedHeaderプラグインを利用したグリッド表の例です。まずはグリッド表のもととなるテーブルを用意してください((1))。プラグインが認識できるよう、テーブルヘッダ、本体は、それぞれ<thead>、<tbody>要素で宣言します。

 あとは、fixheadertableメソッドでテーブルにTableFixedHeaderの機能を付与するだけです((2))。dateFormatオプション((3))は、ソート時にdate型の列の値を解析するためのオプションです。値を整形するためのものではありません。これが指定されていないと日付列のソートが正しく行われないので注意してください。

 TableFixedHeaderは、ソートやページング、タイトル行固定などに対応したリッチなグリッド表を生成するプラグインです。jQuery UIの機能も利用しているので、インポートしなければならないファイルがやや複雑ですが、そこさえクリアーしてしまえば、とても便利なプラグインです。

 リスト1は、TableFixedHeaderプラグインを利用したグリッド表の例です。まずはグリッド表のもととなるテーブルを用意してください((1))。プラグインが認識できるよう、テーブルヘッダ、本体は、それぞれ<thead>、<tbody>要素で宣言します。

 あとは、fixheadertableメソッドでテーブルにTableFixedHeaderの機能を付与するだけです((2))。dateFormatオプション((3))は、ソート時にdate型の列の値を解析するためのオプションです。値を整形するためのものではありません。これが指定されていないと日付列のソートが正しく行われないので注意してください。