多彩な動きで表をソートさせるjQueryプラグイン「jQuery Animated Table Sorter」

多彩な動きで表をソートさせるjQueryプラグイン「jQuery Animated Table Sorter」サンプル 表をソートさせられると数字が見やすくなります。
jQueryプラグインのjQuery Animated Table Sorterを使用するとソートさせられるだけではなく、多彩な動きもつけてくれちゃいます。

使用方法 jQuery Animated Table Sorterからファイルをダウンロード。
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="tsort.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('table').tableSort( {
animation : 'slideLeft', //動き fade, sort, fadeAll, slideLeft, slideLeftAll, none
speed: 500, //ソート速度
distance: '200px', //ソート時に動き距離
delay: 50 //各要素間のずれ
} );
});
</script>

CSSは下記のようにします。
table th div.sortArrow {
width: 11px;
height: 6px;
display: inline-block;
margin-left: 5px;
vertical-align: 2px;
position: relative;
}

table th div.sortArrow div.sortArrowAscending,
table th div.sortArrow div.sortArrowDescending {
position: absolute;
display: none;
width: 11px;
height: 6px;
}

table th div.sortArrow div.sortArrowAscending {
background: url('arrow_asc.png');
}

table th div.sortArrow div.sortArrowDescending {
background: url('arrow_desc.png') no-repeat;
}

あとは通常通りに表組みを記述します。
<table>
<tr>
<th>Year</th>
<th>Film</th>
<th>Credit Role</th>
<th>Grossed</th>
<th>IMDB</th>
<th>Rotten Tomatoes</th>
</tr>
<tr>
<td>1977</td>
<td>Annie Hall</td>
<td>Alvy Singer</td>
<td>$135,852,600</td>
<td>8.2</td>
<td>98%</td>
</tr>
<!-- 以下項目分 -->
</table>

また、ソート条件も数字、テキストなどと指定できるなど柔軟な設定も可能です。

多彩な動きで表をソートさせるjQueryプラグイン「jQuery Animated Table Sorter」サンプル

sponsors

「多彩な動きで表をソートさせるjQueryプラグイン「jQuery Animated Table Sorter」」をシェアする

記事作成:
記事URL:

TOP > > > 多彩な動きで表をソートさせるjQueryプラグイン「jQuery Animated Table Sorter」