- ベストアンサー
Tablesorterを2行一組でソートする
- jQueryのプラグイン「Tablesorter」を使用してテーブルのソートを行っていますが、要素が2行の場合に正しく機能しません。
- 「Tablesorter」を使ったテーブルのソート方法を教えてください。
- 要素が2行一組のテーブルのソートについての対応方法を教えてください。
- みんなの回答 (2)
- 専門家の回答
質問者が選んだベストアンサー
#1です。 >試してみたのですが、table系にはrelativeがきかないようです・・ そのようですね。 位置関係を指定するのが大変面倒になりますね。 書いた手前、試みにいろいろやってみました。 (相当にいい加減なので、あくまでもご参考までにしてください) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> #sorter, #sorter * { margin:0; padding:0; } #sorter { border-collapse:collapse; empty-cells:show; } #sorter th, #sorter td { border:1px solid #888; } #sorter td { height:40px; vertical-align:top; } #sorter th.last { display:none; } #sorter .last { position:absolute; /*display:block;*/ margin-left:-556px; margin-top:20px; width:554px; height:20px; background-color:#fff; } /* 試しに幅を設定 */ #sorter .w1 { width:50px; } #sorter .w2 { width:100px; } #sorter .w3 { width:200px; } /* IE6 #sorter tr { position:relative; } #sorter .last { position:absolute; margin-left:-556px; top:20px; width:554px; height:20px; background-color:#fff; } */ </style> </head> <body> <div>test</div> <table class="sortable" id="sorter"> <tr> <th class="nosort w1">No</th> <th class="w2">Title1</th> <th class="w2">Title2</th> <th class="w3">Title3</th> <th class="w2">Title4</th> <th class="last">Text</th> </tr> <tr> <td>1</td> <td>item1-1</td> <td>item1-2</td> <td>item1-3</td> <td>item1-4</td> <td class="last">text1 text1 text1</td> </tr> <tr> <td>2</td> <td>item2-1</td> <td>item2-2</td> <td>item2-3</td> <td>item2-4</td> <td class="last">text2 text2 text2</td> </tr> <tr> <td>3</td> <td>item3-1</td> <td>item3-2</td> <td>item3-3</td> <td>item3-4</td> <td class="last">text3 text3 text3</td> </tr> <tr> <td>4</td> <td>item4-1</td> <td>item4-2</td> <td>item4-3</td> <td>item4-4</td> <td class="last">text4 text4 text4</td> </tr> </table> </body> </html> 手元のfx3.5、Opera10ではそれっぽく見えますが、IE6はダメですね。 いずれにしろブラウザによって違うみたいなので、ハックをしないとならないと思われます。 (ハックはほとんど知らないので試してません) CSSに詳しい方をお待ちします。 javascriptでのスタイル変更も試してみました。位置は絶対指定ですんなり合せられますが、幅の取得がborderがあるとIE系が異なるので、結局同じような分岐が必要になってくるみたい。
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
そのままそのプラグインを使いたいのであれば・・・って、ご提示のものはjqueryのプラグインではないみたいですが? それはともかく、そのまま使いたいのであれば、2行を1行にしたtableをバックグラウンドで用意しておいて、ソートにはこれを利用することにして、表示用のtableはそれをレイアウト(1行を2行に)を変えてコピーするようにするという手が使えそうです。(コピーとイベントの処理部分はスクリプトを作成する必要がありますが) あるいはそのままやるなら、1行の内容をCSSで無理やり2行に見せちゃうとか。 マークアップは1セットを1行にしておいて行の高さを約2倍に設定しておき、CSSで右端のセル( [テキスト] ってのは1セルですよね?)だけposition:absoluteなどでその行の中で下にずらして重ねて表示(このセルだけ高さを1倍、幅は全体分に設定)することで、見かけ上は2行のように見せることができそうです。 (但し、セル幅などは固定にしておかないと都合が悪そう。でも、trにposition:relativeを指定しておいても、ブラウザによって解釈が異なるようなので位置の指定には工夫が必要かも) とはいえ、これならそのままご提示のスクリプトが使えそうな気がしますが…(確認はしていません) 「そんな不自然なのは嫌」ということであれば、もとのスクリプトはn行で1セットという概念には対応していないと思われますので、スクリプト自体ををカスタマイズするしかないように思われます。
補足
ありがとうございます! 試してみたのですが、table系にはrelativeがきかないようです・・ http://gyauza.egoism.jp/clip/archives/2007/11/071129-tablepositionrelative/ >[テキスト] ってのは1セルですよね? その通りです。セルにならなくても良いのですが、 スクリプトを作成しない方法で何か解決策はないでしょうか。。
お礼
無事に完了しました! 横幅は設定しなくても大丈夫で、td内にdivでもいけました。 本当に助かりました。丁寧に、有難うございます。