Как сделать html-таблицу сортируемой, не сортируя определенные строки?

У меня есть html-таблица с заголовком, который должен быть доступен для сортировки строк в выбранном столбце. Сложность здесь в том, что в таблице есть несколько строк, которые не следует сортировать, а строки, принадлежащие этой конкретной строке, должны оставаться под этой строкой. Вот некоторый код, чтобы вы поняли, о чем я говорю.

<table>
    <thead>
        <tr>
            <th>User</th>
            <th>Item</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th colspan="5" style="text-align:left;">Peter</th>
        </tr>
        <tr>
            <td></td>
            <td>Apple</td>
            <td>10</td>

        </tr>
        <tr>
            <td></td>
            <td>Pineapple</td>
            <td>15</td>

        </tr>
        <tr>
            <th colspan="5" style="text-align:left;">Stan</th>
        </tr>
        <tr>
            <td></td>
            <td>Banana</td>
            <td>7</td>
        </tr>
        <tr>
            <td></td>
            <td>Orange</td>
            <td>10</td>
        </tr>
    </tbody>
</table>

Поэтому, если я нажму, например, на заголовок элемента, строки Apple + Pineapple должны оставаться между строками Peter и Stan во время сортировки. Если я нажму на заголовок пользователя, Питер и Стэн должны быть отсортированы, в то время как элементы Apple + Pineapple останутся в строке Peter, а элементы Banana и Orange останутся в строке Stan ... Надеюсь, вы понимаете, что я имею в виду. Я уже пробовал это с jquery tablesorter-plugin, но я не смог найти никакого решения, которое работало бы для меня.


javascript html jquery html-table tablesorter
person Fantaftw    schedule 26.01.2012    source источник
comment
Просто разделите таблицу на несколько.   -  person georg    schedule 26.01.2012
comment
Я уже думал об этом, но боюсь, что это не сработает... когда я хочу отсортировать по предмету, я хочу отсортировать предметы от Питера, а также предметы от Стэна, просто щелкнув заголовок элемента .   -  person Fantaftw    schedule 26.01.2012

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно будет заключить каждый блок строк в отдельный tbody.

Затем нажатие на User отсортирует только tbody, а нажатие на остальные th отсортирует каждое tbody отдельно.

ИЗМЕНИТЬ

Таблица должна выглядеть так:

<table>
  <thead>
    <tr>
        <th>User</th>
        <th>Item</th>
        <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <th colspan="5" style="text-align:left;">Peter</th>
    </tr>
    <tr>
        <td></td>
        <td>Apple</td>
        <td>10</td>

    </tr>
    <tr>
        <td></td>
        <td>Pineapple</td>
        <td>15</td>

    </tr>
  </tbody>
  <tbody>
    <tr>
        <th colspan="5" style="text-align:left;">Stan</th>
    </tr>
    <tr>
        <td></td>
        <td>Banana</td>
        <td>7</td>
    </tr>
    <tr>
        <td></td>
        <td>Orange</td>
        <td>10</td>
    </tr>
  </tbody>

person ori    schedule 26.01.2012
comment
К сожалению, это не работает для меня. Если я применяю отдельные tbody s, я вообще не могу сортировать таблицу. Может я что не так делаю..какие теги получает ряд Питера и Стэна? - person Fantaftw; 26.01.2012