HOME > Weblog > web > テーブルを並び替える jQuery tablesorter 覚書

テーブルを並び替える jQuery tablesorter 覚書

JavaScriptでtableの動的並べ替え(ソート)ができる、jQuery プラグイン「tablesorter 」。 http://tablesorter.com/docs/

jQuery最新版と、 tablesorter DownLoadから jquery.tablesorter.min.js (もしくはjquery.tablesorter.jsなど)をダウンロード。

ヘッダー内にJavaScritptへのリンク <script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
を記載。
さらに
$(document).ready(function()
{
$("#テーブルのID").tablesorter();
}
);
を記載すればOK。

昇順・降順の矢印をつけたければ、スタイルシートに
#テーブルのID th.headerSortUp {
background-image: url(../img/small_asc.gif);
background-color: #3399FF;
}

#テーブルのID th.headerSortDown {
background-image: url(../img/small_desc.gif);
background-color: #3399FF;
}

#テーブルのID th.header {
background-image: url(../img/small.gif);
cursor: pointer;
font-weight: bold;
background-repeat: no-repeat;
background-position: center left;
padding-left: 20px;
border-right: 1px solid #dad9c7;
margin-left: -1px;
}

等と記載しておく。
(※当然矢印画像も用意して、任意のディレクトリへ保存する)

その他、ソート有無の指定初期ソート項目の指定1行置きに背景色を変更などもできる。

BackLast update:08-07-28 | Comment(0) | Track back(0) | Permalink

コメントを投稿

(このweblogでコメントしたことがないときは、表示される前にオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。)

Back « メインPC交代 | Top | MODxをCPIサーバにインストール覚書 »