我正在使用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();