Tableカラム(列)にソート機能を追加「Tablesorter」

tags:,

Tableのカラム(列)に簡単にソート機能を追加できるjQueryプラグイン「Tablesorter」の紹介です。

「Webサイトに公開しているテーブルにExcelのようなソート機能がほしいな……でも、そんな便利な機能ってあるのかなぁ~」あるんですっ!jQueryプラグイン「Tablesorter」を使えば、簡単にソート機能が追加できるんですっ!

スポンサーリンク

jQueryプラグイン「Tablesorter」

jQueryプラグイン「Tablesorter」を利用して、数字・アルファベット・ひらがな・カタカナ・漢字をソートするソースとデモを作成しました。漢字を読み順にソートすることができないので、漢字をソートさせたい場合はソート用のカラム(列)を作成する必要がありそうですね。デモで確認してみてください。

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

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