勉強したことのメモ

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プラグイン使用時の注意

最近lightboxが急に動かなくなったという不具合があり 調べたところけっこう ...

PHPとSQLiteでi-mobileのデータをグラフ化

i-mobileでクリック保証のアフィリエイトだけど数値が並んでいるだけでグラフ ...

javascriptやjQueryで画像を書き換えても変わらない場合

けっこう前に画像をアップロードしてリアルタイムに プレビューする機能を作った時に ...

要素の点滅

やりたかった事はaタグ内で囲まれている部分を点滅。 <blink>だ ...

formでdisplay:none;にしてても送信される

formで特定の部分をdisplay:none;で非表示にしてても 内容は送信さ ...

画像をドラッグ&ドロップでアップロードする方法

画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にdro ...

lightboxをファイルアップロードなしで使う(CDN)方法

本番実装時ならともかく、テスト用とかでlightboxみたいによく使うプラグイン ...

jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)

画像のスライダーを作る時に便利なプラグインであるbxslider。 簡単に使える ...

prototypeとjqueryの競合

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