テーブルのページング、ソート機能追加プラグイン
カテゴリー: jQueryプラグイン
最終更新日: 2011-09-14
投稿日: 2011-08-03
<table>にページング、ソート機能を追加するjQuery用プラグインです。
現在、インターネットで探せばページング、ソート機能を有した素晴らしいプラグインがたくさんあります。
私もTablesorter 2.0やFlexigridなどを利用していました。
ですが、Tablesorter 2.0はフッターが固定できない（tbodyをスクロールさせたい）、Flexigridはデータ量が増えた時に致命的に遅い（200件以上の表示になると何十秒も待ってしまう）、という私にとってあと一歩が足りない状態でした。
という事で、上記２つのプラグインを参考にしながら自分好みのページング機能やソート機能を持ったjQuery用プラグインを作成しましたので、皆様も宜しければご利用下さい。
主な機能
- <table>にソート機能を追加
- <table>にページング機能を追加
- Ajaxに対応（まだ改善の余地有りですが…）
- ヘッダー（thead）とフッター（tfoot）を固定
デモ(別ページで開きます)
ダウンロード
- DownLoad(245)
オプション値
- height
- 高さを数値で指定。ブラウザの大きさに合わせる場合は”auto”
デフォルト: “auto” - row
- 行数を指定。
デフォルト: 50 - url
- Ajaxでデータを取得します
デフォルト: false - param
- Ajax利用時、必要なパラメーターを送る事が出来ます。送信データはGETで取得出来ます。
param: {action: “address-list”} - cols
-
各列の幅とid、text-alignを指定します。幅を指定した場合は固定されます。idはAjaxで利用します。text-alignは左寄せ、右寄せ、中央の設定です。
（幅のみ指定）cols: [ {width: 50}, {width: 100} ]
（idを指定）cols: [ {id: "zip", width: 50}, {id: "address1", width: 100} ]
（text-align指定）cols: [ {id: "zip", width: 50, align: "right"}, {id: "address1", align: "center" ] - qtype
- 検索する列名。
デフォルト: “” - query
- 検索文字列
デフォルト: “” - onResult
- Ajaxでデータの取得後、表示するhtmlを加工する場合に利用できます。(デモ参照）
対応ブラウザ
確認したのはWindowsでIE7,IE8,FireFox5,chrome,Operaです。
IE6には未対応です。
その他注意事項
何かしらのトラブルが発生しても当社が責任を負うことは一切ありませんので、使用する場合は自己責任でお願いします。
更新履歴
2011-09-14 バグフィックス（alignのみの指定だとalignが効かないバグの修正）（ver1.2）
2011-08-25 ローディング画面追加、alignオプション追加（ver1.1）
2011-08-03 ver1.0 公開
