0

テーブルソーターとjQuery

プロジェクトにhttp://tablesorter.com/docs/を使用しています。

情報

2 つの列ヘッダーを 1 つにマージ/連結しました。つまり、3 番目の列の 1 つの並べ替えが欠落しています。

jsフィドル

http://jsfiddle.net/RqN8a/18/

質問

最後の列の並べ替えを、マージされた/colspaned ヘッダーに強制的に追加することはできますか?

HTML (jsFiddle が機能しない場合)

<p>
<strong>This works</strong>
</p>

<table class="tablesorter">
<thead>
<tr>
    <th>Heading1</th>
    <th>Heading2</th>
    <th>Heading3</th>
</tr>
</thead>
<tbody>
<tr>
    <td>Data1a</td>
    <td>Data2a</td>
    <td>Data3a</td>
</tr>
    <tr>
    <td>Data1b</td>
    <td>Data2b</td>
    <td>Data3b</td>
</tr>
</tbody>
</table>

<p>
    <strong>Can this work?</strong><br>
    Another arrow should be added for sorting the "Data3" column
</p>

<table class="tablesorter">
<thead>
<tr>
    <th>Heading1</th>
    <th colspan="2">?   Heading2</th>
</tr>
</thead>
<tbody>
    <tr>
       <td>Data11</td>
       <td>Data2c</td>
       <td>Data3a</td>
    </tr>
    <tr>
        <td>Data12</td>
        <td>Data2b</td>
        <td>Data3b</td>
    </tr>
    <tr>
        <td>Data13</td>
        <td>Data2a</td>
        <td>Data3c</td>
    </tr>
</tbody>
</table>

インライン jQuery (jsFiddle が機能しない場合)

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

</p>

4

2 に答える 2

1

私の知る限り、あまり変更する必要はありません。

2 番目の HTML を次のように変更するだけで、希望を実現できます。

<table class="tablesorter2">
    <thead>
        <tr>
            <th rowspan="2">Heading1</th>
            <th colspan="2">Heading 2 and 3</th>
        </tr>
        <tr>
            <th>Heading2</th>
            <th>Heading3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data11</td>
            <td>Data2c</td>
            <td>Data3a</td>
        </tr>
        <tr>
            <td>Data12</td>
            <td>Data2b</td>
            <td>Data3b</td>
        </tr>
        <tr>
            <td>Data13</td>
            <td>Data2a</td>
            <td>Data3c</td>
        </tr>
    </tbody>
</table>

ライブデモを参照

于 2012-12-04T09:03:53.473 に答える