今日の人気記事

まだデータがありません。

テーブルソート アニメ効果付きで行を並べ替え「Animated Table Sorter」

当ページのリンクには広告が含まれています。

スポンサーリンク

アニメ効果付きでテーブルの行を並べ替えるプラグイン「Animated Table Sorter」を紹介します。

jQueryプラグイン「Animated Table Sorter」

テーブルヘッダー項目をクリックするとアニメーション効果付きで、行を並べ替える(ソートする)ことができます。ソートした状態で、もう一度テーブルヘッダーをクリックすると逆順にソートしてくれます。

オプションで、アニメスピード、アニメ効果(フェイド、スライドなど)を設定することができます。

仮名文字もソートできるので、おすすめ!

スポンサーリンク

デモのテーブルヘッダーをクリックし、ソートアニメーションなどの挙動を確認してみてください。

「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>
スポンサーリンク

関連記事(一部広告含む)