jQueryの情報やプラグイン公開しています

テーブルのページング、ソート機能追加プラグイン

<table>にページング、ソート機能を追加するjQuery用プラグインです。

現在、インターネットで探せばページング、ソート機能を有した素晴らしいプラグインがたくさんあります。
私もTablesorter 2.0Flexigridなどを利用していました。

ですが、Tablesorter 2.0はフッターが固定できない(tbodyをスクロールさせたい)、Flexigridはデータ量が増えた時に致命的に遅い(200件以上の表示になると何十秒も待ってしまう)、という私にとってあと一歩が足りない状態でした。

という事で、上記2つのプラグインを参考にしながら自分好みのページング機能やソート機能を持ったjQuery用プラグインを作成しましたので、皆様も宜しければご利用下さい。

主な機能

  • <table>にソート機能を追加
  • <table>にページング機能を追加
  • Ajaxに対応(まだ改善の余地有りですが…)
  • ヘッダー(thead)とフッター(tfoot)を固定

デモ(別ページで開きます)

ダウンロード

- DownLoad(919)

このページへチップを贈る

オプション値

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を加工する場合に利用できます。(デモ参照)
onAfterResult
データの設定後(HTML表示完了後)に機能する関数です。データ設定後に独自のテーブル加工をする際に利用できます。

対応ブラウザ

確認したのはWindowsでIE7,IE8,FireFox5,chrome,Operaです。
IE6には未対応です。

その他注意事項

何かしらのトラブルが発生しても当社が責任を負うことは一切ありませんので、使用する場合は自己責任でお願いします。

更新履歴

2013-01-17 onAfterResult関数を追加、その他細かい修正(ver1.3)

2011-09-14 バグフィックス(alignのみの指定だとalignが効かないバグの修正)(ver1.2)

2011-08-25 ローディング画面追加、alignオプション追加(ver1.1)

2011-08-03 ver1.0 公開

タグ
, , , ,
トラックバックURL

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

ページTOPに戻る