テーブルソート アニメ効果付きで行を並べ替え「Animated Table Sorter」
当ページのリンクには広告が含まれています。
スポンサーリンク
アニメ効果付きでテーブルの行を並べ替えるプラグイン「Animated Table Sorter」を紹介します。
jQueryプラグイン「Animated Table Sorter」
テーブルヘッダー項目をクリックするとアニメーション効果付きで、行を並べ替える（ソートする）ことができます。ソートした状態で、もう一度テーブルヘッダーをクリックすると逆順にソートしてくれます。
オプションで、アニメスピード、アニメ効果（フェイド、スライドなど）を設定することができます。
仮名文字もソートできるので、おすすめ！
スポンサーリンク
デモのテーブルヘッダーをクリックし、ソートアニメーションなどの挙動を確認してみてください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="Animated Table Sorterのデモでーす。">
<title>Animated Table Sorter - jQuery Plugin Demo</title>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="tsort.js"></script>
<script>
$(document).ready(function() {
$('table.tableSorter').tableSort( {
sortBy: ['numeric', 'text', 'text', 'text'],
animation: 'slideLeftAll',
speed: 400,
distance: '200px',
delay: 50
});
});
</script>
<link rel="stylesheet" href="style.css" type="text/css" />
<style>
table {
border-collapse: collapse;
border-spacing: 0;
}
td, th {
padding: 10px;
border-bottom: 1px #0000ff solid;
}
</style>
</head>
<body>
<h1>Animated Table Sorterのデモでーす。</h1>
<table class="tableSorter">
<tr><th>年</th><th>開催国</th><th>都市</th><th>てすと</th></tr>
<tr><td>1992</td><td>スペイン</td><td>バルセロナ</td><td>か</td></tr>
<tr><td>1996</td><td>アメリカ合衆国</td><td>アトランタ</td><td>さ</td></tr>
<tr><td>2000</td><td>オーストラリア</td><td>シドニー</td><td>あ</td></tr>
<tr><td>2004</td><td>ギリシャ</td><td>アテネ</td><td>や</td></tr>
<tr><td>2008</td><td>中国</td><td>北京</td><td>た</td></tr>
<tr><td>2012</td><td>イギリス</td><td>ロンドン</td><td>は</td></tr>
<tr><td>2016</td><td>ブラジル</td><td>リオデジャネイロ</td><td>な</td></tr>
<tr><td>2020</td><td>日本</td><td>東京</td><td>ま</td></tr>
</table>
</body>
</html>
スポンサーリンク