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

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

1 голос
/ 26 января 2012

У меня есть 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 должны остаться между строкой Питера и Стэна, покасортируетсяЕсли я нажму на заголовок пользователя, Питер и Стэн должны быть отсортированы, в то время как Предметы Apple + Ананас остаются под строкой Питера, а Банановые и Оранжевые Предметы остаются под строкой Стэна ... Я надеюсь, вы понимаете, о чем я.Я уже пробовал это с плагином jquery tablesorter , но я не мог найти решение, которое работало бы для меня.

1 Ответ

0 голосов
/ 26 января 2012

Вам нужно будет заключить каждый блок строк в отдельный 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>

...