MOMOYA.Labs 桃屋ラボ
最終更新日時
 2019年05月29日(Wed)
コンテンツ
    トップページ
  • VB
    • フォーム
    • コントロール
    • インターネット
  • C#
    • フォーム
    • ファイルシステム
    • データ統計
    • SQLite
  • VBA
    • Excel
    • Tips
  • PHP
    • 基礎
    • 文字列
    • ファイルシステム
    • 通信
    • PEAR
    • Twitter API
    • Tips
  • Ruby
    • Rubyを始めよう!
    • ファイルアクセス
    • ディレクトリ
    • Excel操作
  • Python
    • Pythonを始めよう!
  • OpenSocial
    • 各種情報
  • HTML&CSS
    • HTML5
    • CSS
    • iPhone向けサイト作成
    • HTML Tips
    • CSS Tips
  • Javascript
    • ウィンドウ関連
    • ナビゲーション
    • 便利なスクリプト
    • Tips
  • プログラム全般
    • .Net Framework
    • 数学?
    • その他
  • Oracle
    • Tips
    • 各種情報
  • DB2
    • Tips
  • MySQL
    • 開発で使いそうなSQL
    • メンテナンス
  • ネットワーク
    • デバイス
    • その他
  • Windows
    • Vista
    • Windows 7
    • IIS
    • Excel
    • 拡張
    • コマンドプロンプト活用
    • 不具合対応
    • ショートカットキー
    • Tips
  • Windows FreeSoft
    • ブラウザ(FireFox)
    • Web開発関連
    • グラフィック
    • プログラミング
    • SQL
    • VMware
    • プロジェクト管理
    • その他
    Mac
  • Linux&Unix
    • Kubuntu
    • Fedora
    • Debian
    • NetBSD
    • Tips
  • Linux Software
    • オンラインストレージ
  • インターネット知識
    • ホームページ作成
    • Javascriptで操作
    • アフィリエイト
    • ネットで見つけた面白いもん
    • 便利なサイト
    • 便利な活用方
    • Twitter
    • その他
  • iPhone
    • おすすめアプリ
    • Jailbreak
    • 検証
  • 雑記
    • ネットワーク関連
    • ハードウェア関連
    • セキュリティ関連
    • 読み方
    • 故障?保証対象?
    • その他
  • 雑記(IT・デジモノ以外)
    • 言葉の意味
    • 転職関連
    • その他
  • MOMOYA's FreeSoft
    • Keyboard Launchar
  • 個人的メモ
    • リンクメモ
    • ネタ
サイト内検索
Sponsored Link
プロフィール

名前:桃屋
歳/性別:20代/Male
生息地:東京都(23区内)
Sponsored Link
リンク(ジャンル別50音順|■ = 相互)
【 プログラム全般 】
■ MadCap ・ SQLの窓 ・ Wordpress初心者な技術屋の忘備録
【 VB,C# 】
・ C#,VB.NET入門 ・ DOBON.NET
【 PHP 】
・ phpspot ・ Smartyマニュアル ・ 忘れっぽいエンジニアのPHPリファレンス
【 API 】
・ Google Maps API リファレンス ・ Google MAPS APIプログラミング ・ Twitter API Viewer
【 HTML&CSS 】
・ Tag index
【 JavaScript 】
・ 432 + JavaScript Libraries ・ jsdo.it
【 その他のプログラミング言語 】
・ 逆引きPython ・ 逆引きRuby
【 プログラミング関連 】
・ 正規表現メモ
【 読み物 】
・ MSDN マガジン
【 Oracle 】
・ Oracle管理者のためのSQLリファレンス ・ 忘れっぽいエンジニアのORACLEリファレンス
【 Linux,UNIX 】
・ CentOSで自宅サーバー構築 ・ Fedoraで自宅サーバー構築 ・ FTP/理化学研究所 ・ Linuxコマンド逆引き大全 ・ Linuxで自宅サーバ
【 便利サイト 】
・ Wayback Machine
【 Webツール 】
・ .htaccess Editor ・ Convert C# to VB.NET ・ Convert VB.NET to C# ・ QRコード作成 ・ テキスト変換サービス
【 開業関連 】
・ プログラマーとSEのフリーランスのススメ
【 ブログ類 】
■ ぱんだぁにゃ ■ 元携帯屋店員がブログにちょうせん! ■ 日常気まぐれブログ
【 その他 】
・ 2018年 秋アニメ 一覧 ・ 2018年 夏アニメ 一覧 ・ 2018年 春アニメ 一覧 ・ アキバイズム
-> リンク一覧 
モバイルサイト
RSS 2.0
更新情報をRSSで取得!
アクセスカウンター


現在の閲覧者数:

設置日:2008年12月05日

[Javascript-便利なスクリプト] テーブルにソート機能を簡単に追加 Table Sorter

Webアプリケーション開発をしていて、後からソート機能を追加しようと思うと、結構面倒なものですね。
その面倒をJavascriptで解決できないかと考えて探して見つけたのが、この「Table sorter」です。
この「Table sorter」を使えば、少しのコードを追加するだけで、簡単にテーブルにソート機能を付加できます。
使うか否より、まず デモ をご覧ください。


「Table sorter」のダウンロード

Download からFull releaseの物をダウンロードできます。
要らないものは、個々消してください。(私は実装時に殆ど消し、CSSの内容も位置も変えましたけど。)
ダウンロードしたファイルは、今回はサンプルとして [site_root]/js/tablesorter/ に解凍するとします。


「Table sorter」の使い方

このスクリプトは設置がとても簡単です。
・Table Sorterのスクリプトを読み込ませる
・ソート機能を適応させるテーブルにIDが割り当てられていない場合、IDを書き足す
・Tableタグにスタイルを適応させるためにクラスを書き足す
・ページ読み込み時に実行されるソート機能付加用のスクリプトを書き足す
・ヘッダ行を<thead>タグで囲っていない場合は書き足す
ぐらいの作業じゃないでしょうか。

サンプルとして以下のHTMLソースを [site_root]/sort.html に作成してみます。
<html>
<head>
	<title>Table Sorter</title>
	<link rel="stylesheet" type="text/css" href="js/tablesorter/themes/blue/style.css" />
	<script type="text/javascript" src="js/tablesorter/jquery-latest.js"></script>
	<script type="text/javascript" src="js/tablesorter/jquery.tablesorter.js"></script>
	<script type="text/javascript">
		$(document).ready(function()
			{
				$("#SortTable").tablesorter();
			}
		);
	</script>
</head>
<body>
	<table id="SortTable" class="tablesorter">
		<thead>
			<tr>
				<th>地区</th>
				<th>都道府県名</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>カンサイ</td>
				<td>オオサカ</td>
			</tr>
			<tr>
				<td>カンサイ</td>
				<td>キョウト</td>
			</tr>
			<tr>
				<td>カントウ</td>
				<td>トウキョウ</td>
			</tr>
			<tr>
				<td>カントウ</td>
				<td>チバ</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

このソースで簡単なソートテーブルを表示できる事と思います。
ちなみに、データ行が1行も無い場合はエラーになるみたいなんで、動的にテーブルを生成する場合は、ダミー行を挿入するか、Tablesorterのコードを改変する必要有り。
ダミー行を挿入する場合は以下のような不可視の行をテーブルに含ませると良いでしょう。
<!-- <td />は列数と同じだけ作成する -->
<tr style="display:none;"><td /><td /></tr>

また、Table sorterの Configuration を参照する事で、細かい設定も可能となっています。
以下、よく使うであろう設定をいくつかのサンプルを挙げておきます。


ソートさせたくない列を指定する

以下のように、<head>内で記述したJavascriptを以下のように変更すると、1列目のソート機能を無効にする事が可能です。
列数の指定は、1番左の列を0、2番目の列を指定する場合は1と指定します。
$("#SortTable").tablesorter({
	headers: {
		0: { sorter: false }	// 1列目のソートを無効にする
	}
});

また、複数列を無効にしたい場合は、以下のようにカンマ(,)区切りで記述する事で複数行のソートを無効化できます。
$("#SortTable").tablesorter({
	headers: {
		0: { sorter: false },	// 1列目のソートを無効にする
		2: { sorter: false }	// 3列目のソートを無効にする
	}
});


数値としてソートするよう指定する

数値のソートを行いたい場合、デフォルトの設定のままでは文字列としてソートするために期待通りの結果が得られません。
数値としてソートを行いたい場合は、以下のように数値列を指定します。
$("#SortTable").tablesorter({
	headers: {
		0: { sorter: "digit" },	// 1列目を数値としてソートする
		2: { sorter: "digit" }	// 3列目を数値としてソートする
	}
});


その他 技術情報

■カンマ付き数値のソート対応
Yahoo!知恵袋から引用。
質問者bokinaviさん、回答者spared_turkeyさんに感謝。
「jquery.tablesorter.js」の以下の記述を変更することにより、カンマ以下の数字もきれいにソートできるようになりました。備忘記録もかねて情報を残しておきます。

var i = parseFloat(s);
↓
var i = parseFloat(s.replace(/,/g,""));
Yahoo!知恵袋 より引用
「Javascript」に関する「本」の商品を自動的に表示しています。
キーワードに関連していない商品は、Amazonがオススメする商品です。気になる物があればどうぞ。

作成日:2008年05月25日(Sun) / 更新日:2010年11月08日(Mon)

Labs SYSTEM Ver0.93 @ Copyright(c)2007−2025 MOMOYA SYSTEM