【jQuery】表の操作について ～ tablesorter 編 ～

jQuery

■ 2018/08/02追記

 * 以下の関連記事で扱った DataTables ってのもある。
https://blogs.yahoo.co.jp/dk521123/37668379.html

■ テーブルにソート機能を追加する

設置方法

[1] 以下から、tablesorter (__jquery.tablesorter.zip) をダウンロードする
http://tablesorter.com/docs/#Download
[2] ダウンロードしたzipファイルを解凍し、「jquery.tablesorter.min.js」
    (又は「jquery.tablesorter.js」)を任意の場所に置く
    (今回はフォルダ「js」配下に配置する)

[3] jQueryと[2]のJavaScriptファイルをインポートする

<script src="">http://code.jquery.com/jquery.js">
<script src="./js/jquery.tablesorter.min.js"></script>

# 以降は任意の設定（けどやった方がいい）

[4] 解凍したファイル内にあるフォルダ「themes」を任意の場所に置く
　　（中にある「.svn」とzipファイルは不要なので削除してもいい）
[5] [4]にあるCSSファイルをインポートする

<link rel="stylesheet" href="./themes/blue/style.css">
or
<link rel="stylesheet" href="./themes/green/style.css">

注意

(1) テーブルを記述する時には、<thead>タグと<tbody>タグを付加することを忘れずに！（ここではまった...）

■ サンプル

フォルダ構成

sample.html
js
 +- jquery.tablesorter.min.js
themes
 +- style.css
 +- asc.png
 +- bg.png
 +- desc.png

sample.html

<!DOCTYPE html>
<html>
<head>
<script src="">http://code.jquery.com/jquery.js">
<script src="./js/jquery.tablesorter.min.js"></script>
<!-- 任意 -->
<link rel="stylesheet" href="./themes/blue/style.css">
<title>Sample</title>  
<script type="text/javascript" >
$(document).ready(function() { 
        $("#sampleTable").tablesorter(); 
}); 

</script>
</head>
<body>
<table id="sampleTable" cellspacing="1" class="tablesorter">             
    <thead>> 
        <tr> 
            <th>ID</th> 
            <th>Name</th> 
            <th>age</th> 
            <th>date</th> 
        </tr> 
    </thead> 
    <tbody> 
        <tr> 
            <td>0001</td> 
            <td>Mike</td> 
            <td>28</td> 
            <td>2014/01/11</td> 
        </tr> 
        <tr> 
            <td>0002</td> 
            <td>john</td> 
            <td>33</td> 
            <td>2015/08/12</td> 
        </tr> 
        <tr> 
            <td>0003</td> 
            <td>Tom</td> 
            <td>18</td> 
            <td>1872/02/12</td> 
        </tr> 
        <tr> 
            <td>0004</td> 
            <td>Kevin</td> 
            <td>45</td> 
            <td>1962/12/11</td> 
        </tr> 
        <tr> 
            <td>0005</td> 
            <td>Ken</td> 
            <td>22</td> 
            <td>2000/11/24</td> 
        </tr> 
    </tbody> 
</table>
</body>
</html>

参考資料

http://webkaru.net/jquery-plugin/tablesorter/
http://momoya.me.land.to/?pid=5
http://wp.tech-style.info/archives/377
http://developmentor.lrlab.to/postal/jquery/jquery.tablesorter/basic1.html
色々載ってる
http://allabout.co.jp/gm/gc/434260/5/

関連記事

tablesorter を使って select box をソートする

https://blogs.yahoo.co.jp/dk521123/35567503.html

tablesorter に関するトラブルあれこれ

https://blogs.yahoo.co.jp/dk521123/35567574.html

【jQuery】【Bootstrap4】表の操作について ～ DataTables 編 ～

https://blogs.yahoo.co.jp/dk521123/37668379.html