テーブルソートを実現できるjavascript | JG スポーツ日記

第93回全国高校野球選手権、地方予選の日程が決定
夏の甲子園地区予選、開催中
高校野球、春季大会が終了
2009年高校野球春季大会日程
WBC日本代表・2連覇達成！
第81回センバツ、組み合わせ決定
第81回センバツ、明日抽選会
第81回センバツ出場校紹介
第81回センバツ出場校決定
センバツ行進曲にGReeeeN「キセキ」が内定

フリーページ

cgi設置

(6)

お気に入りブログ

３０日ほんとによか…

New! たっちゃん９２４４さん

鹿児島県高校野球 鹿児島ベースボール倶楽部さん
ちゆきの旦那 ちゆきの旦那さん
Cafe de ｍoca　　　 minakyonさん
のんびり とんとん72026932さん
かんつのひとりごと … かんつ5824さん
-グリーンのスポーツ… グリーン77さん
あま野球日記＠大学… ささやん0583さん
【寝言は寝て言え】 … あひるグチさん
高校野球写真館 ゆかりん10024930さん

コメント新着

ああああ@ ジャイアンツクルーンジャイアンツクルーン１６２キロ出したよ

ニューストピックス

カレンダー

キーワードサーチ

▼キーワード検索

< 新しい記事

新着記事一覧(全1352件)

過去の記事 >

2008/06/17

今回は、サイト運営に関する話です。
ランキングの一覧表を作ろうと思い、データをまとめていたんですが
その表がソート出来ないかなと思い調べていた所、良い物が見つかりました。
javascriptを使ってテーブルをソート するもので、
jQuery プラグイン Tablesorter 2.0 というものです。
これは、2つのファイルを読み込ませる事で可能となります。
さらに、オプションもあり、かなり自由自在になります。

jQuery の本体と Tablesorter をダウンロードし展開しておきます。
jquery.min.js、jquery.tablesorter.min.js の2つのファイルのみ必要になります。
テーブルのCSSも必要なので、jquery/style.cssも入れておきます。

あとは、適当なフォルダにこの3つのファイルをアップロードします。
（私は、「jquery」フォルダを作り、そこに3つのファイルを入れました）
jquery/style.css
jquery/jquery.min.js
jquery/jquery.tablesorter.min.js

<head>内にこのファイルを読み込ませる 為、以下を記述します。

ソート可能にするコードを追加する

$(document).ready(function() {
$("#maintable").tablesorter();
}

#maintableは、<table id="maintable"～などと使います。
「#maintable」を「table」にすると、そのページの全てのテーブルがソート可能となります。

次 にテーブルをソート可能にする 為、テーブルタグに記述します。
<table id="maintable"、class="tablesorter" とします。
次にthead 、 tbody を入れます。合わせると以下のようになります。

これのみでテーブルソート可能となります。
結構、軽いのでかなり重宝しそうです。
オプション（というのか？）は様々なものがあり、自分が使ったものは
テーブル内の行ごとに色を変える （ソート可能にするコードを追加するの部分に追加）

$.tablesorter.defaults.widgets = ['zebra'];

あと、一番導入したいと思ったのは、 <th>を繰り返し表示する ものです。
<th>には、だいたい表の重要な部分に関する事を書きますが、
下に長いと一番上にある<th>部分が見えなくなってしまう事があります。
これを解消するように、何行ごとに<th>部分を繰り返すかを設定出来るオプションもあります。
これは、 Tablesorterの配布サイトのサンプル でありました。

これらを使ったページが、ここにあります。（私のサイト）
テーブルの上の部分をクリックするだけでソートします。
こんな感じでやってます。