勉強したことのメモ

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
画像をドラッグ&ドロップでアップロードする方法

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

javascript_logo_unofficial-300x300
複数のajax処理の結果をまとめて表示

同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...

jquery_logo
スワイプ・フルスクリーン・サムネイル対応のjQuery画像ビューア

タブレット&スマホでの閲覧が想定されているページで、スワイプ・サムネイル・フルス ...

jquery_logo
jQueryで指定した要素を簡単にフォーカスするfocusbleの使い方

divやspanなど指定した要素を簡単にフォーカスするjQueryプラグインがあ ...

images
要素の表示or非表示

今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...

jquery_logo
FullCalendarでtitle以外も表示させたい

FullCalendarでカレンダー内のイベントをクリックした際にtitle以外 ...

jquery_logo
画像の登録フォームにてjQueryプラグインを用いてWebカメラの映像を撮影させる方法

form内の画像アップロード部分にて、通常であれば画像ファイルを参照させたものを ...

jquery_logo
Ajaxのクロスドメイン2

PHPも介せない場合。こちらの方がスマートでよさそう。 jsonpを使うみたい。 ...

jquery_logo
ダウンロード無しで外部ファイル呼び出し

■jQuery http://scriptsrc.net/ ■bootstrap ...

jquery_logo
jQueryでドロワーメニューの作成

■やりたかった事 スマホ用サイトにドロワーメニューを設置したかった。 &nbsp ...