Tableカラム（列）にソート機能を追加「Tablesorter」
当ページのリンクには広告が含まれています。
スポンサーリンク
Tableのカラム（列）に簡単にソート機能を追加できるjQueryプラグイン「Tablesorter」の紹介です。
「Webサイトに公開しているテーブルにExcelのようなソート機能がほしいな……でも、そんな便利な機能ってあるのかなぁ～」あるんですっ！jQueryプラグイン「Tablesorter」を使えば、簡単にソート機能が追加できるんですっ！
スポンサーリンク
jQueryプラグイン「Tablesorter」
jQueryプラグイン「Tablesorter」を利用して、数字・アルファベット・ひらがな・カタカナ・漢字をソートするソースとデモを作成しました。漢字を読み順にソートすることができないので、漢字をソートさせたい場合はソート用のカラム（列）を作成する必要がありそうですね。デモで確認してみてください。
ソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="Tablesorterのデモでーす。">
<title>Tablesorter Demo - jQuery Plugin Demo</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="jquery.tablesorter.js"></script>
<script>
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
</script>
</head>
<body>
<h1>Tablesorterのデモでーす。</h1>
<p>項目の「数字」「アルファベット」「ひらがな」「カタカナ」「漢字」をクリックしてみて下さい。</p>
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>数字</th>
<th>アルファベット</th>
<th>ひらがな</th>
<th>カタカナ</th>
<th>漢字</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>a</td>
<td>う</td>
<td>イ</td>
<td>比較</td>
</tr>
<tr>
<td>2</td>
<td>c</td>
<td>あ</td>
<td>ウ</td>
<td>格安</td>
</tr>
<tr>
<td>0</td>
<td>b</td>
<td>い</td>
<td>エ</td>
<td>借</td>
</tr>
<tr>
<td>3</td>
<td>d</td>
<td>え</td>
<td>ア</td>
<td>鯖</td>
</tr>
</tbody>
</table>
</body>
</html>
スポンサーリンク