ダウンロード先
jquery.tablesorter.zipをダウンロードして解凍して使う。
自分はjquery.tablesorter.min.jsを使った。
使い方
「thead」と「tbody」を入れる必要あり。
html
<table id="hogehoge">
<thead>
<tr><th>名前</th><th>身長</th><tr>
</thead>
<tbody>
<tr><td>スズキ</td><td>173</td></tr>
<tr><td>サトウ</td><td>168</td></tr>
<tr><td>サイトウ</td><td>175</td></tr>
</tbody>
</table>
jQuery(単にソートしたい場合)
$(function() {
$('#hogehoge').tablesorter();
});
jQuery(指定した列のソートを無効)
$(function() {
$('#hogehoge').tablesorter({
//左から0番目の列のソートを無効にする。
headers: {
0: {sorter:false}
}
});
});
ソートマークのつけ方
tablesorterがクラスを追加してくれるので、それに合わせてCSSを設定している。
デフォルトの場合
<th class='tablesorter-header'>カラム名</th>
昇順の場合
<th class='tablesorter-header tablesorter-headerAsc'>カラム名</th>
降順の場合
<th class='tablesorter-header tablesorter-headerDesc'>カラム名</th>
css
.tablesorter-header div{
margin-right: 20px;
}
.tablesorter-header{
background-image: url(../img/asc_and_desc.gif);
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
.tablesorter-headerAsc{
background-image: url(../img/asc.gif);
}
.tablesorter-headerDesc{
background-image: url(../img/desc.gif);
}