Как я могу использовать TableSorter для сортировки нескольких групп строк отдельно? - PullRequest
Новая
       13

Как я могу использовать TableSorter для сортировки нескольких групп строк отдельно?

1 голос
/ 05 июля 2019

Я видел похожие вопросы о группировке строк в TableSorter, но они задают что-то немного отличающееся от того, что я хочу. Мне бы хотелось, чтобы в одной таблице было две группы строк, которые сортируются отдельно. Например: 

| col1 | col2 | col3  | <- this header never moves
|  A   |   1  |  1.5  |
|  J   |   3  |  2.7  | <- these three rows get sorted
|  X   |   2  |  1.2  |
|Totals|   6  |  5.4  | <- This totals the first group and never moves
| another header row  | <- this header never moves
|  B   |   5  |  5.0  |
|  L   |   3  |  8.2  | <- these three rows get sorted
|  N   |   7  |  3.3  |
|Totals|  15  | 16.5  | <- This totals the second group and never moves

Это отсортировано по col1. Если я нажму на «col2», верхние три строки должны быть A, X, J, а вторые три строки должны быть L, B, N. Я уверен, что это возможно, но как я могу сделать так, чтобы TableSorter сделал это?

1 Ответ

1 голос
/ 05 июля 2019

С моей вилкой TableSorter вы можете добавить несколько тел, и каждый будет сортировать отдельно от других. Что касается общего и дополнительного заголовка, также добавьте их в отдельные элементы tbody. 

<table class="tablesorter">
  <thead>
    <tr><th>col1</th><th>col2</th><th>col3</th></tr>
  </thead>
  <tbody><tr><!-- data --></tr></tbody>
  <tbody><tr><th>Totals</th><!-- ... --></tr></tbody>
  <tbody class="fake-header">
    <tr><th>col1</th><th>col2</th><th>col3</th></tr>
  </tbody>
  <tbody><tr><!-- more data --></tr></tbody>
  <tbody><tr><th>Totals</th><!-- ... --></tr></tbody>
</table>

Никакой дополнительной инициализации не требуется: 

$(function() {
  $('table').tablesorter({
    theme: 'blue',
    widgets: ['zebra']
  });
});

Я настроил это демо , которое включает в себя математический виджет для автоматического вычисления итогов строки для вас. Единственные необходимые изменения находятся в итоговой строке: 

<tbody>
  <tr>
    <th>Totals</th>
    <th data-math="above-sum"></th>
    <th data-math="above-sum"></th>
  </tr>
</tbody>

И включите виджет и маску вывода в инициализацию: 

$(function() {
  $('table').tablesorter({
    theme: 'blue',
    widgets: ['zebra', 'math'],
    widgetOptions: {
      math_mask: '#,###.#'
    }
  });
});
...