Действия кликов JQuery TableSorter не имеют никакого эффекта

Question

Действия кликов JQuery TableSorter не имеют никакого эффекта

0

Я должен делать что-то глупо, но я этого не вижу. На моем сайте я прикрепляю JQuery TableSorter к таблице и надеюсь провести некоторую сортировку, но клики не имеют никакого эффекта. Не происходит сортировки. Он просто остается как статическая таблица.

Вот упрощенная задача, которую я имею:

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

Это очень простая таблица с javascript:

<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();
});

Есть ли что-то очевидное, что мне не хватает?

cedmans 10 окт. 2013, в 19:07

Источник

0

Если вам интересно, у меня есть форк таблиц с большим количеством улучшений ... и он также позволяет использовать td в заголовке таблицы.
Mottie 19 окт. 2013, в 18:57

Теги:

javascript

jquery

tablesorter

3 ответа

2

Попробуйте изменить строку заголовка, чтобы использовать теги <th> вместо тегов <td>.

Andy Meyers 10 окт. 2013, в 15:01

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/

Tauseef 10 окт. 2013, в 14:58

Ещё вопросы

Если вам интересно, у меня есть форк таблиц с большим количеством улучшений ... и он также позволяет использовать td в заголовке таблицы.

Neil.Allen · Accepted Answer · 2013-10-10T15-42-00.000Z

Это связано с вашей разметкой в таблице HTML.

Внутри элемента thead вам нужно использовать th-теги вместо td.

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

Рабочий JSfiddle:

http://jsfiddle.net/bybFK/