Таблицы с вкладками с таблицей сортировки - PullRequest
Новая
       2

Таблицы с вкладками с таблицей сортировки

1 голос
/ 15 февраля 2012

Я использую 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, я прошу вас рассказать мне, или дать мне совет, как это сделать.

1 Ответ

2 голосов
/ 20 февраля 2012

Я думаю, что проблема только в том, что в списке вкладок нет закрывающего </a>.Попробуйте этот формат ( демо ): 

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