1

UI で jQuery テーブルソーターを使用しています。2 行のヘッダーを持つテーブルがあるシナリオがあります。メインヘッダーとサブヘッダー。サブヘッダーにソートを追加したい。どうやってやるの。

これは私のコードがどのように見えるか、

<table class="grid" id="gr1" cellspacing="0" width="100%" border="1">
     <tr bgcolor="#FF0000"><th class="NOBORDER" colspan="1">&nbsp;</th>
     <th class="NOBORDER" colspan="3">A</th>
     <th class="NOBORDER" colspan="3">B</th>
     <th class="NOBORDER" colspan="3">C</th>
     <th class="NOBORDER" colspan="3">D</th>
     <th class="NOBORDER" colspan="3">E</th>
     <th class="NOBORDER" colspan="3">F</th>
     </tr>
     <tr>
     <th>Group</th> 
     <th>A1</th>
     <th>A2</th>
     <th>A3</th>
     <th>B1</th>
     <th>B2</th>
     <th>B3</th>
     <th>C1</th>
     <th>C2</th>
     <th>C3</th>
     <th>D1</th>
     <th>D2</th>
     <th>D3</th>
     <th>E1</th>
     <th>E2</th>
     <th>E3</th>
     <th>F1</th>
     <th>F2</th>
     <th>F3</th>
    </tr>

このテーブルから、2 行目のグループ列を並べ替えたいと思います。どうやってやるの？

4

2 に答える 2

2

テーブルには 3 つの問題があります (作業デモ)。

  1. <thead>tablesorter は、初期化する前にandを持つテーブルを必要とし<tbody>ます。サンプルには完全な表が表示されていないため、<tbody>も欠落している可能性があるとしか考えられません。

    <table class="grid tablesorter" id="gr1" cellspacing="0" width="100%" border="1">
    <thead>
        <tr bgcolor="#FF0000">
            <th class="NOBORDER" colspan="1">&nbsp;</th>
            <th class="NOBORDER" colspan="3">A</th>
            ...
            <th class="NOBORDER" colspan="3">F</th>
        </tr>
        <tr>
            <th>Group</th>
            <th>A1</th>
            <th>A2</th>
            <th>A3</th>
            <th>B1</th>
            ...
            <th>F3</th>
        </tr>
    </thead>
    <tbody>
        <tr>...</tr>
    </tbody>
</table>

  2. tablesorterの元のバージョンでは"tablesorter"、スタイリングを適用する前にクラス名をテーブルに追加する必要があります。

  3. 元のバージョンも、 の複数の機能行でうまく機能しないようです<thead>。そのため、一番上の行の並べ替えを無効にして、3 番目の列 (4 番目の列ですが、各グループでは 3 番目) で並べ替えが正しく機能するようにします。この初期化コードを試してください:

    $('table').tablesorter({
    headers : {
        0 : { sorter: false },
        1 : { sorter: false },
        2 : { sorter: false },
        3 : { sorter: false },
        4 : { sorter: false },
        5 : { sorter: false },
        6 : { sorter: false }   
    }
});
于 2013-03-23T13:08:08.540 に答える
0

内側のテーブルにテーブルソーターを適用して、テーブルの内側にテーブルを配置してみてください。内側のテーブルには 2 行目のヘッダーがあり、外側のテーブルには最初の行があります。ただし、外側のテーブルを内側のテーブルとシームレスにマージする css/widths で作業する必要があります。したがって、コードは次のようになります。

<table class="outerTableLook" id="OuterTable" cellspacing="0" width="100%">
 <tr bgcolor="#FF0000"><th class="NOBORDER" colspan="1">&nbsp;</th>
 <th class="NOBORDER" colspan="3">A</th>
 <th class="NOBORDER" colspan="3">B</th>
 <th class="NOBORDER" colspan="3">C</th>
 <th class="NOBORDER" colspan="3">D</th>
 <th class="NOBORDER" colspan="3">E</th>
 <th class="NOBORDER" colspan="3">F</th>
 </tr>
<tr>
<table class="grid" id="gr1" cellspacing="0" width="100%" border="1">
 <tr>
 <th>Group</th> 
 <th>A1</th>
 <th>A2</th>
 .......
</tr>  
....
</table><!--inner table -->
</tr>
</table><!-- outer table -->
于 2013-03-21T17:33:06.337 に答える