HTMLのTableの内容をソートして並び替えできるようにするjQueryプラグイン tablesorter

WS003156
このエントリーをはてなブックマークに追加
PR

tablesorter 2.0

http://tablesorter.com/docs/

HTMLのtableって表計算ソフトのように、ソートって出来ない
それを出来るようにするプラグインがコレ

jQueryとこのプラグインをつかって、HTMLで書いたtableの項目をソート出来るようにする

table

DEMO

 

tablesorter の使い方

プラグインの読み込みと、jQueryでのセレクタの選択

他、オプションのテーブルのテーマの使い方

 

STEP1 プラグインのダウンロード

http://tablesorter.com/docs/#Download

WS003154

ダウンロードしたファイルの中には、このプラグイン、jQuery、テーマ、アドオン等すべてが入っています

 

テーマは2種ありGREENとBLUEがある

127_0_0_1_55359_0033_index_html2

 

STEP2 jQueryとプラグインとテーマの読み込み

<link rel="stylesheet" href="themes/bue/style.css">
<script src="jquery-latest.js"></script>
<script src="jquery.tablesorter.min.js"></script>

すでにウェブサイトにjQueryを使っている場合は、読み込ませる必要はないです
ただし、バージョンは1.2.1かそれ以上

jQueryとjQueryプラグインの順序が逆にならないように!
逆だと動きません、かならずjQueryのあとにjQueryプラグインを読み込ませましょう コレ、プラグイン利用時の鉄則です

テーマのCSSはgreenとblueのどちらかのCSSを読み込む

 

 

STEP3 対象のテーブルを指定する

<script>
$(document).ready(function() 
    { 
        $("#sort-table").tablesorter(); 
    } 
);
</script>

対象のテーブルを指定するには、<table>タグにIDを追加します、そのIDを指定することで、対象にします。

今回の例では、tableタグにid=”sort-table”とつけています

(クラスでの指定でも、jQueryのセレクタの使い方で指定すればOK)

 

 

STEP4 動作確認

これで基本的な、テーブルの機能の追加は完了です実際に動くか動作の確認をしてみましょう
テーブルのヘッダー部分をクリックしてソートできていればOKです

 

うまく以後かない場合は、ファイルの設置場所へのパスが正しいか 場合によってはURLで指定してみる

jQueryのセレクタ選択が正しくできてるか、もう一度チェックしてみてください

 

プラグインのライセンスは MIT と GPL のデュアルライセンス です。

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)