スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
テーブルのソート jquery tablesorterを使った方法



tableSorterってものすごく便利ですね。
これを調べるまでは、クリックされたヘッダが何か判定して、サーバーにSQL再発行してもらう?
とか、いろいろ考えていましたが・・・

なんてこったい。すぐに実装できてしまった。
素晴らしい。js、jqueryっておもしろい!

aaa_20141016225056f50.png


メインのtablesorterは、次のURLからダウンロードしてくるだけ。
http://tablesorter.com/docs/#Download
そしてソースは以下の通り。




<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description">
<meta name="robots" content="noindex, nofollow">
<title>tableソート</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
</script>

</head>
<body>
<table id="myTable" class="tablesorter" border="1">
<thead>

<br>

<tr>
<th>氏名</th>
<th>年齢</th>
<th>性別</th>
<th>出身地</th>
<th>備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>テスト太郎</td>
<td>10</td>
<td>男</td>
<td>東京都</td>
<td>やんちゃ</td>
</tr>
<tr>
<td>テスト花子</td>
<td>25</td>
<td>女</td>
<td>北海道</td>
<td>OL</td>
</tr>
<tr>
<td>デモ太郎</td>
<td>18</td>
<td>男</td>
<td>神奈川県</td>
<td>特になし</td>
</tr>
<tr>
<td>デモ花子</td>
<td>43</td>
<td>女</td>
<td>福岡県</td>
<td>博多生まれ</td>
</tr>
</tbody>
</table>

</body>
</html>

スポンサーサイト
【VBS】文字列が指定桁数に満たない場合、0詰めする関数 | Home | windows updateの自動更新で再起動させない方法

Comment

Post comment

Secret

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。