我正在使用Tablesorter 2.0,并且有多个表。我希望他们被选中。为了帮助您理解我的观点,dataTables具有类似的选项(http://datatables.net/release-datatables/examples/api/tabs_and_scrolling.html)。

初始化代码:

$(function() {
    $("table")
        .tablesorter({widthFixed: true, widgets: ['zebra']})
        .tablesorterPager({container: $("#pager")});

});


例如我的一张桌子:

<div class="table">
<table cellspacing="1" class="tablesorter">
<thead>
    <tr>
        <th>Name</th>
        <th>Carbohydrates (g)</th>
        <th>Proteins (g)</th>
        <th>Fats (g)</th>
        <th>Kcal</th>
        <th>IG</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Potatos</td>
        <td>18.3</td>
        <td>1.9</td>
        <td>0.1</td>
        <td>82 kcal</td>
        <td>90</td>
    </tr>
</tbody>
</table>
</div>


我知道我必须把它放在这样的地方:

<div id="tabs">
<ul>
    <li><a href="#tabs-1">Bakery</li>
    <li><a href="#tabs-2">Fruits</li>
    <li><a href="#tabs-3">Vegetables</li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</div>


由于我对javascript的了解很少,因此请您告诉我,或给我一些提示。

最佳答案

我认为问题仅在于选项卡列表中没有结束</a>。尝试以下格式(demo):

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Bakery</a></li>
        <li><a href="#tabs-2">Fruits</a></li>
        <li><a href="#tabs-3">Vegetables</a></li>
    </ul>

    <div id="tabs-1">
        <table class="tablesorter">
            ...
        </table>
    </div>

    <div id="tabs-2">
        <table class="tablesorter">
            ...
        </table>
    </div>

    <div id="tabs-3">
        <table class="tablesorter">
            ...
        </table>
    </div>

</div>


javascript

$('#tabs').tabs();
$('.tablesorter').tablesorter();

10-05 23:02
查看更多