勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

簡単にtable内をソート

      2014/07/03

やりたかった事は、

・テーブル内でのソート

・内容は文字、数値、日時

PHPじゃなくてjQueryプラグインを使って短時間で実装したい

以上。出来る限りシンプルなものを探したところ

軽くて目当てのものを発見。

■参考サイト

http://joequery.github.io/Stupid-Table-Plugin/

■サンプル

http://sample.taitan916.info/sort/

■使い方

jQueryプラグインを読み込む。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="./stupidtable.min.js"></script>

<th>のところに、

・文字⇒data-sort="string"

・数値⇒data-sort="int"

・日時⇒data-sort="date"

をつける。

あと<tbody>~</tbody><thead>~</thead>がいるみたい。

■ソース

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="./stupidtable.min.js"></script>
<script>
$(function(){
$("#simpleTable").stupidtable();
});
</script>

<style>

.sorting-asc, .sorting-desc {

background-color: #ff0000;

}

</style>
<title>Stupid jQuery Table Sortのテスト</title>
</head>
<body>
<h1>Stupid jQuery Table Sortのテスト</h1>
<table border="1" id="simpleTable">
<thead>
<tr>
<th>ソート無し</th><th data-sort="string" style="cursor:pointer;">名前</th><th data-sort="int" style="cursor:pointer;">数字</th><th data-sort="date" style="cursor:pointer;">時間</th>
</tr>
</thead>
            <tbody>
<tr>
<td>ここはソートなし</td><td>山田</td><td>252</td><td>2013-01-05 23:59:10</td>
</tr>
<tr>
<td>ソート無しです</td><td>川口</td><td>157</td><td>2012-01-25 10:22:44</td>
</tr>
<tr>
<td>ソート無し</td><td>なまえ</td><td>9</td><td>2013-01-04 10:22:45</td>
</tr>
<tr>
<td>ソート無し無し</td><td>かに玉</td><td>52</td><td>2012-01-25 10:22:45</td>
</tr>
<tr>
<td>ソーとなし</td><td>あいう</td><td>10</td><td>2019-01-25 10:22:45</td>
</tr>
  </tbody>
</table>
</body>
</html>

■その他

ソートすると<th>のところに、

class=sorting-asc

class=sorting-desc

が付与される。なので、CSSで指定して、

ソートしたやつは色変えたりとかすると分かりやすい。

あとソートする<th>のところにはCSSマウスポインタ

変えると視覚的にも分かりやすい。

 - jQuery

  関連記事

jquery_logo
アコーディオンメニュー

簡単にアコーディオンメニューを導入したい時に 便利に使えたプラグイン。 ■サンプ ...

jquery_logo
jQueryでのやりたい事

フォーム周りをよく使うのでまとめておく。 ・テキストボックスのvalue取得、書 ...

jquery_logo
jQueryで新しく追加した要素に対してイベントがきかない場合の対応

jQueryで新たに追加した要素に対して、 clickイベントを使いたかったけど ...

jquery_logo
classの取り扱い

jQueryでclassを扱う際、 //id=aaaにclass=testを付与 ...

jquery_logo
tableのフィルター機能

jQueryのプラグインで簡単にフィルター機能が つけられたのでメモ。 ■必要な ...

jquery_logo
画像をつなぎ合わせて360度ビューの様に見せるjQueryプラグイン

3Dデータではなく、コマ送りになっている2D画像を用いて360度ビューの様に見せ ...

jquery_logo
prototypeとjqueryの競合

ちょいちょい見るが、実際に競合をおこしているケースに あたったのでメモ。 ↓↓の ...

javascript_logo_unofficial-300x300
他サイトのRSS情報を画像付きで表示させる

WordPressでAというサイトを作成し、AのRSS情報をBというサイトでアイ ...

jquery_logo
adblock(広告削除)設定している場合はページを表示させない

iPhoneのSleipnirでネットをしていると「広告がブロックされたのでペー ...

jquery_logo
jQueryでshow/hideよりaddClass/removeClassの方が速い

diaplay:none/blockする際に最近はshow()/hide()を ...