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 function column to reveal full details (or toggle|show|hide all) or double click to update the browser location.
OptionDefaultDescription
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
3BruceWayneBatman
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.
4HalJordanGreen 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.
2ClarkKentSuperman
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.
5CharlesXavierProfessor 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.
1SusanRichardsInvisible 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
3BruceWayneBatman
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.
4HalJordanGreen 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.
2ClarkKentSuperman
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.
5CharlesXavierProfessor 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.
1SusanRichardsInvisible 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
# ID First Last State Info
1337DeniseHarrisCTlectus tortor vestibulum
2268BrienBarrowKYipsum aenean eros
3665MikelAbsalomFLamet vestibulum adipiscing
4540LaShondaBuikemaSDpulvinar at consectetur
Tbody "tablesorter-no-sort-tbody" spacer 1
5212LeifChoateUTporttitor mattis sit
6367ErickaRagusaMAat sollicitudin hendrerit
7136WaddieMaynardNHsollicitudin ac mi
8305KenWeissmannAKmagna sit at
Tbody "tablesorter-no-sort-tbody" spacer 2
9983PetrKunselmanWIamet convallis eros
10306MelanieNaborsMAtincidunt risus porttitor
11345EmilCorsonMOdui aliquam aliquam
12335TheodoreBrillWVsit pulvinar eros
Tbody "tablesorter-no-sort-tbody" spacer 3
13430NishalSmithDEtortor tincidunt porttitor
14470SherylScheppeIDsed massa hendrerit
15795ChristopherPollardCTsed lacus adipiscing
16400RaymondJessicaINmi vestibulum amet
Tbody "tablesorter-no-sort-tbody" spacer 4
17927DonovanJoslinMNamet augue aliquam
18882NingMccollumKSsed egestas vestibulum
19772SarahRadistDEipsum odio dui
20975AishaBadertscherCTmi 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