# tablesorter

## Sort multiple tbodies by primary row (beta)

### Flexible client-side table sorting

Back to documentation

### Notes

- This widget (v2.22.2) allows the sorting of tbodies (not rows) based on a specified row set by the `sortTbody_primaryRow` option.
- This widget replaces the `cssInfoBlock` setting:
  - The value is replaced with the value from `sortTbody_noSort` option so as to include info-only tbodies in the tbody sort.
  - Due to this modification, tbodies with `colspan` and `rowspan` cells may not sort or filter as expected, so it would be best to avoid `colspan` and `rowspan` cells in the primary row!
- This widget also modifies the `serverSideSorting` option:
  - This value is set to `true` to disable tbody internal row sorting.
  - This value is set to `false` (default) when the `sortTbody_sortRows` widget option is `true`.
  - This modification should not dramatically affect other widgets; at least none that I can think of right now.
- In these demos,
  - Primary Rows are styled with a light yellow background as an indicator.
  - The primary row color difference is important in the third table when the sorting of internal rows is enabled (`sortTbody_sortRows` is `true`).
  - The first two tables:
    - Primary rows are clickable. Clicking on them toggles the sibling rows (in the first table), or child rows (in the second table).
    - Primary rows have a dark top border to add a visual separation of each tbody.
    - *NOTE* when filtering the content of the first table, sibling rows that do not match the query will be hidden. Toggling their view is only possible because the `"filtered"` class (used by the filter widget & set by the `filter_filteredRow` widget option) is toggled.
- *ALERT* This widget requires tablesorter v2.22.2+ and jQuery 1.4+

### Options

TIP! Click on the link in the option column to reveal full details (or toggle|show|hide all) or double click to update the browser location.

Option | Default | Description
--- | --- | ---
sortTbody_primaryRow | null | Set this option to a string containing a jQuery selector pointing to the primary row to use for tbody sorting. If a sortable tbody does not contain a primary row, or the primary row is not found, it will be sorted at the bottom of the table. In these demos, all primary rows have a class name of `"main"`, so this option is then set as follows:
    sortTbody_primaryRow : '.main'
*NOTE* This will accept any jQuery selector, so it is possible to target multiple classes `'.main, .primary'`, but only the first found cell in the sorted column will be used when sorting the tbody. *WARNING* This widget was not designed to deal with `colspan` or `rowspan` within the primary row, so it is best to avoid them.
sortTbody_sortRows | false | When `true`, all rows within each `tbody` will also be sorted; the primary row is included!
sortTbody_noSort | 'tablesorter-no-sort-tbody' | Add the class name from this option to any tbodies that are to remain static. They will not be sorted.

# Demo

Sort info-only tbodies by their primary row
Rank | First Name | Last Name | Superhero Name
--- | --- | --- | ---
3 | Bruce | Wayne | Batman
Batman is the superhero protector of Gotham City, a man dressed like a bat who fights against evil and strikes terror into the hearts of criminals everywhere. In his secret identity he is Bruce Wayne, billionaire industrialist and notorious playboy. Although he has no superhuman powers, he is one of the world's smartest men and greatest fighters. His physical prowess and technical ingenuity make him an incredibly dangerous opponent. He is also a founding member of the Justice League and the Outsiders.
4 | Hal | Jordan | Green Latern
Hal Jordan is the most well-known Green Lantern. He was the first earthman ever inducted into the Green Lantern Corps, and has been heralded as possibly the greatest Green Lantern of all time. Green Lantern is also a founding member of the Justice League of America.
2 | Clark | Kent | Superman
Superman, also known as the Man of Steel, is one of the most powerful superheroes in the DC Universe. His abilities include incredible super-strength, super-speed, invulnerability, freezing breath, flight, and heat-vision.
5 | Charles | Xavier | Professor X
Charles Francis Xavier was born in New York City to the wealthy Brian Xavier, a well-respected nuclear scientist, and Sharon Xavier. After Brian died in an accident, his science partner Kurt Marko comforts and marries the grieving Sharon. When Xavier's telepathic mutant powers emerge, he discovers Kurt cares only about his mother's money.
1 | Susan | Richards | Invisible Woman
Susan's primary power deals with light waves, allowing her to render herself and others invisible.

Sort tbodies by their primary row (using child rows for extra info)
Rank | First Name | Last Name | Superhero Name
--- | --- | --- | ---
3 | Bruce | Wayne | Batman
Batman is the superhero protector of Gotham City, a man dressed like a bat who fights against evil and strikes terror into the hearts of criminals everywhere. In his secret identity he is Bruce Wayne, billionaire industrialist and notorious playboy. Although he has no superhuman powers, he is one of the world's smartest men and greatest fighters. His physical prowess and technical ingenuity make him an incredibly dangerous opponent. He is also a founding member of the Justice League and the Outsiders.
4 | Hal | Jordan | Green Latern
Hal Jordan is the most well-known Green Lantern. He was the first earthman ever inducted into the Green Lantern Corps, and has been heralded as possibly the greatest Green Lantern of all time. Green Lantern is also a founding member of the Justice League of America.
2 | Clark | Kent | Superman
Superman, also known as the Man of Steel, is one of the most powerful superheroes in the DC Universe. His abilities include incredible super-strength, super-speed, invulnerability, freezing breath, flight, and heat-vision.
5 | Charles | Xavier | Professor X
Charles Francis Xavier was born in New York City to the wealthy Brian Xavier, a well-respected nuclear scientist, and Sharon Xavier. After Brian died in an accident, his science partner Kurt Marko comforts and marries the grieving Sharon. When Xavier's telepathic mutant powers emerge, he discovers Kurt cares only about his mother's money.
1 | Susan | Richards | Invisible Woman
Susan's primary power deals with light waves, allowing her to render herself and others invisible.

`sortTbody_sortRows`:
(sort internal rows)

Sortable & non-sortable tbodies
# | ID | First | Last | State | Info
--- | --- | --- | --- | --- | ---
1 | 337 | Denise | Harris | CT | lectus tortor vestibulum
2 | 268 | Brien | Barrow | KY | ipsum aenean eros
3 | 665 | Mikel | Absalom | FL | amet vestibulum adipiscing
4 | 540 | LaShonda | Buikema | SD | pulvinar at consectetur
Tbody "tablesorter-no-sort-tbody" spacer 1
5 | 212 | Leif | Choate | UT | porttitor mattis sit
6 | 367 | Ericka | Ragusa | MA | at sollicitudin hendrerit
7 | 136 | Waddie | Maynard | NH | sollicitudin ac mi
8 | 305 | Ken | Weissmann | AK | magna sit at
Tbody "tablesorter-no-sort-tbody" spacer 2
9 | 983 | Petr | Kunselman | WI | amet convallis eros
10 | 306 | Melanie | Nabors | MA | tincidunt risus porttitor
11 | 345 | Emil | Corson | MO | dui aliquam aliquam
12 | 335 | Theodore | Brill | WV | sit pulvinar eros
Tbody "tablesorter-no-sort-tbody" spacer 3
13 | 430 | Nishal | Smith | DE | tortor tincidunt porttitor
14 | 470 | Sheryl | Scheppe | ID | sed massa hendrerit
15 | 795 | Christopher | Pollard | CT | sed lacus adipiscing
16 | 400 | Raymond | Jessica | IN | mi vestibulum amet
Tbody "tablesorter-no-sort-tbody" spacer 4
17 | 927 | Donovan | Joslin | MN | amet augue aliquam
18 | 882 | Ning | Mccollum | KS | sed egestas vestibulum
19 | 772 | Sarah | Radist | DE | ipsum odio dui
20 | 975 | Aisha | Badertscher | CT | mi nec massa

# Page Header

    <link rel="stylesheet" href="../css/theme.blue.css">
    <script src="js/jquery-latest.min.js"></script>
    <script src="../js/jquery.tablesorter.js"></script>

    <!-- Tablesorter: widgets (optional) -->
    <script src="../js/jquery.tablesorter.widgets.js"></script>
    <script src="../js/widgets/widget-sortTbodies.js"></script>

# CSS

# Javascript

# HTML