[3DEG BLOG] ブログは結構好き放題です。Twitterもどうぞ。→3deg

3DEG BLOG

2010年4月21日

「JavaScript Table Sorter」を適用するも数値の並び替えが

TableSorter

プラグインではなくJavaScriptのみの単体で動作するソート機能のものを探していたら、非常に良いものを見つけました。demoを見れば便利さは一目瞭然だと思います。

JavaScript Table Sorter
demo

ただ、実際使ってみると日付がうまくソートできないという問題がありました。
例えば「2005年4月」と「2004年12月」と「2004年11月」を並べてみると

2004/12
2004/11
2005/04

こんな感じに11月と12月が逆になってしまいました。実はスラッシュが曲者でこれを取るとソートされるのですが、スラッシュに限らず間に何かあるとダメみたいです。・・・さすがにそれはちょっと。



というわけで解決方法を探すために、Google先生と先人の知恵を借りました。

列で整列可能なテーブルライブラリ Table Sorter -システムを支えるシステム
http://d.hatena.ne.jp/mis-report/20081223/1230053585

上記サイトを読むとバッチリ解決です。一応要点だけ書いておくと

 51:	function compare(f,c){
52: f=f.value,c=c.value;
53: var i=parseFloat(f.replace(/(\$|\,)/g,'')),n=parseFloat(c.replace(/(\$|\,)/g,''));
54: if(!isNaN(i)&&!isNaN(n)){f=i,c=n}
55: return (f>c?1:(f<c?-1:0))
56: }

上記の51~56行目をそっくり下に変えるだけです。(デフォルトではscript.js)

function compare(f,c){
f=f.value,c=c.value;
if( isNumber(f) && isNumber(c)) {
f = parseFloat(f.replace(/(\$|\,)/g,''));
c = parseFloat(c.replace(/(\$|\,)/g,''));
}
return (f>c?1:(f<c?-1:0))
}

function isNumber(a) { return +a == a }

あとはCSSを弄って、3DEGの左カラムに適用してみました。

3DEG 左カラム

実は前はphpとJavaScriptでほとんど同じ様なフォームを作っていたのですが、
将来的に部分的にMTで包む可能性もあるので、出来るだけ簡素化したかったのです。
実際、この並び替え機能が利用されている頻度は低いと思いますが、
それでも3DのエロゲーはPCスペックに左右されるので、ある程度の目安で並べる機能は残しておきたかったのです。

あとはどこか(メインページか左フレームをタブ化)に条件検索を付けようかと思っています。大げさなものではなくて「ブランド」「アニメ調orノーマル」「リアルタイムorムービー」というのを考えています。

「イリュージョン」の「リアルタイム」の「アニメ調作品」で探すと○件出てくる...というイメージです。多分こっちのほうが、特に初見の人には需要があると思ったり。

本当はMySQLでテーブルを作って、PHPでデータベースから引っ張ってこようかと思いましたが、現状では埃を被ったMySOLの本を捲りながらでも、勉強不足感と仕掛けの大掛りすぎる感を感じたので断念。
そんなわけでAjaxを使いあとは、技術力と相談かなーと思っています。

そんな感じです。

コメントする