0

I must be doing something stupidly wrong, but I'm not seeing it. On my site, I attach the JQuery TableSorter to a table and hope to have some sorting done, but clicks have no effect. No sorting happens. It just remains as a static table.

Here's a simplified JSFiddle of the problem I'm having:

http://jsfiddle.net/96AEE/3/

It's a very simple table with javascript as follows:

<table cellspacing="0" cellpadding="0" class="tablesorter" id="gift_certificates">
    <thead>
        <tr class="nav">
            <td>
                <input type="checkbox" onclick="checkAll();" class="short" value="1" id="check_all" name="check_all" />
            </td>
            <td>Gift Cert</td>
            <td>Note</td>
            <td>Order #</td>
            <td>Order Date</td>
            <td>Amount</td>
            <td>Redeemed</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td valign="top"></td>
            <td>ss1q</td>
            <td>-</td>
            <td>-</td>
            <td>$300.00</td>
            <td>    <a href="test.php">Sale</a>

            </td>
            <td>true</td>
        </tr>
        <tr>
            <td valign="top">
                <input type="checkbox" value="103" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_103" name="check_103" />
            </td>
            <td>443ss</td>
            <td>(1d10t) Arizona Tea</td>
            <td>-</td>
            <td>-</td>
            <td>$50.00</td>
            <td>-</td>
        </tr>
        <tr>
            <td valign="top">
                <input type="checkbox" value="50" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_50" name="check_50" />
            </td>
            <td>199e</td>
            <td>(#9000) Over</td>
            <td>-</td>
            <td>-</td>
            <td>$300.00</td>
            <td>-</td>
        </tr>
        <tr>
            <td valign="top">
                <input type="checkbox" value="87" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_87" name="check_87" />
            </td>
            <td>F990</td>
            <td>($09aa) Trouble</td>
            <td>-</td>
            <td>-</td>
            <td>$300.00</td>
            <td>-</td>
        </tr>
    </tbody>
</table>

JavaScript:

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

Is there something obvious I'm missing?

4

3 回答 3

2

在创建表格标题时，您肯定忽略了一些东西；你正在使用<td>而不是使用<th> 你也不需要分配类tablesorter to your table

<table cellspacing="0" cellpadding="0" class="tablesorter" id="gift_certificates">
    <thead>
        <tr class="nav">
            <th>
                <input type="checkbox" onclick="checkAll();" class="short" value="1" id="check_all" name="check_all" />
            </th>
            <th>Gift Cert</th>
            <th>Note</th>
            <th>Order #</th>
            <th>Order Date</th>
            <th>Amount</th>
            <th>Redeemed</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td valign="top"></td>
            <td>ss1q</td>
            <td>-</td>
            <td>-</td>
            <td>$300.00</td>
            <td>    <a href="test.php">Sale</a>

            </td>
            <td>true</td>
        </tr>
<tr>
            <td valign="top">
                <input type="checkbox" value="87" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_87" name="check_87" />
            </td>
            <td>F990</td>
            <td>($09aa) Trouble</td>
            <td>-</td>
            <td>-</td>
            <td>$300.00</td>
            <td>-</td>
        </tr>
    </tbody>
</table>

JavaScript：

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

http://tablesorter.com/docs/

于 2013-10-10T17:13:01.077 回答
2

尝试更改标题行以使用<th>标签而不是<td> 标签。

于 2013-10-10T17:01:16.400 回答
2

这是由于您在 HTML 表上的标记。

在 thead 元素中，您需要使用 th 标签而不是 td。

<thead>
    <tr>
        <th></th>
        ...
    </tr>
</thead>

工作JSfiddle：

http://jsfiddle.net/bybFK/

于 2013-10-10T17:03:18.443 回答