Tablesorteを2行一組でソートする

解決済

質問者：robertheindel
質問日時：2011/04/13 18:36
回答数：2件

jQueryのプラグイン「Tablesorter」でテーブルのソートをさせているのですが、
ソートさせたい要素が2行だとうまくいかなくて困っています。

[要素1][要素2][要素3][要素4][要素5]←th
[要素1][要素2][要素3][要素4][要素5]
[テキストテキストテキストテキスト]
[要素1][要素2][要素3][要素4][要素5]
[テキストテキストテキストテキスト]
[要素1][要素2][要素3][要素4][要素5]
[テキストテキストテキストテキスト]
・・・

対応の仕方が分かる方、宜しくお願い致します。

http://www.scriptiny.com/2008/11/javascript-tabl …

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2011/04/14 22:51

#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系が異なるので、結局同じような分岐が必要になってくるみたい。

- 0
- 件

通報する

この回答へのお礼

無事に完了しました！
横幅は設定しなくても大丈夫で、td内にdivでもいけました。

本当に助かりました。丁寧に、有難うございます。

通報する

お礼日時：2011/04/16 01:27

No.1

回答者： fujillin
回答日時：2011/04/13 20:29

そのままそのプラグインを使いたいのであれば・・・って、ご提示のものはjqueryのプラグインではないみたいですが？

それはともかく、そのまま使いたいのであれば、2行を1行にしたtableをバックグラウンドで用意しておいて、ソートにはこれを利用することにして、表示用のtableはそれをレイアウト（1行を2行に）を変えてコピーするようにするという手が使えそうです。（コピーとイベントの処理部分はスクリプトを作成する必要がありますが）

あるいはそのままやるなら、1行の内容をCSSで無理やり2行に見せちゃうとか。
マークアップは１セットを1行にしておいて行の高さを約2倍に設定しておき、CSSで右端のセル（ [テキスト] ってのは1セルですよね？）だけposition:absoluteなどでその行の中で下にずらして重ねて表示（このセルだけ高さを1倍、幅は全体分に設定）することで、見かけ上は2行のように見せることができそうです。
（但し、セル幅などは固定にしておかないと都合が悪そう。でも、ｔｒにposition:relativeを指定しておいても、ブラウザによって解釈が異なるようなので位置の指定には工夫が必要かも）
とはいえ、これならそのままご提示のスクリプトが使えそうな気がしますが…（確認はしていません）

「そんな不自然なのは嫌」ということであれば、もとのスクリプトはn行で1セットという概念には対応していないと思われますので、スクリプト自体ををカスタマイズするしかないように思われます。

この回答への補足

ありがとうございます！

試してみたのですが、table系にはrelativeがきかないようです・・
http://gyauza.egoism.jp/clip/archives/2007/11/07 …

＞[テキスト] ってのは1セルですよね？
その通りです。セルにならなくても良いのですが、
スクリプトを作成しない方法で何か解決策はないでしょうか。。

補足日時：2011/04/14 00:06

通報する