Notes
- This widget will only work in tablesorter version 2.8+ and jQuery version 1.7+.
- Please do not use this widget in very large tables (it might be really slow)
or when your table includes multiple tbodies. - In v2.15.6, added
group_saveGroups&group_saveResetoptions. More details are included in the "Options" section. - In v2.14, added
group_dateStringoption. More details are included in the "Options" section. - In v2.13, added
group_separatoroption &group-separator-#header class name. To see this in action, check out the file type parser demo. - In v2.12, added
group_callback&group_completeoptions. See options section below for details. - In v2.11:
- The grouping widget now works across multiple tbodies.
- Added
group-falseheader option which disables the grouping widget for a specific column. - Added the
group_collapsedoption - get more details in the options block below. - You can now toggle all group rows by holding down the Shift key while clicking on a group header.
- This widget now works properly with the pager addon (pager addon updated).
- Clicking on any of the sortable header cells will cause the column below it to sort and add a group header.
Options
Group widget default options (added inside of tablesorter widgetOptions)
| Option | Default | Description |
|---|---|---|
| group_collapsible | true |
when true, the group headers become clickable and collapse the rows below it.
|
| group_collapsed | false |
when true and group_collapsible is also true, all groups will start collapsed (v2.11)
|
| group_saveGroups | true |
Remember collapsed groups (v2.15.6)
|
| group_saveReset | null |
Element used to clear saved collapsed groups (v2.15.6)
|
| group_count | " ({num})" |
Allows you to add custom formatting, or remove, the group count within the group header. Set it to false or an empty string to remove the count.
|
| group_separator | "-" |
When the group-separator class name is added, it uses the setting from this option to split the table cell content for grouping v2.13.If your content has mixed separators (e.g. images/cats/burger-time.jpg), you can set this option to use a regular expression:
// the above example becomes: ["images", "cats", "burger-time", "jpg"] group_separator : /[/.]/ |
| group_formatter | null |
Use this function to modify the group header text before it gets applied. It provides various parameters (txt, col, table, c, wo) to make it work for any of the table columns and data. See the comments in the example below for more details.
group_formatter : function(txt, col, table, c, wo) {
// If there are empty cells, name the group "Empty"
return txt === "" ? "Empty" : txt;
}
|
| group_callback | null |
Use this function to further modify the group header to include more information (i.e. group totals). Parameters include ($cell, $rows, column, table). See the example below for more details v2.12.
group_callback : function($cell, $rows, column, table){
$cell.find('.group-name').append(' group'); // adds "group" to the end of the group name
}
|
| group_complete | "groupingComplete" |
Event triggered on the table when the grouping widget has finished work v2.12.
$('table').on('groupingComplete', function(){
// always hide empty groups ("Empty" can be added by the group_formatter function)
$(this).find('.group-header:contains("Empty")').trigger('toggleGroup');
});
|
|
group_months group_week group_time |
(see description) |
Name arrays included so that the language of the date groups can be modified easily. Defaults (English):
|
| group_dateString | (see description) |
When the "group-date" class name is set on a column, this function is used to format the date string. This is the default function:
// you can just return date, date.toLocaleString(), date.toLocaleDateString() or d.toLocaleTimeString()
group_dateString : function(date) {
return date.toLocaleString();
}
Other functions that can be used are date (alone), date.toLocaleString(), date.toLocaleDateString() or d.toLocaleTimeString(). See this reference for more details.
|
Header Class Names
Group header class names (when changing the grouping, notice that the sort doesn't change, just the position and names of the group headers):
"group-word"(same as"group-word-1") - group the rows using the first word it finds in the column's parsed data."group-word-n"("n"can be any number) - group the rows using the nth word in the column*."group-separator"(same as"group-separator-1") - group the rows using the text between the start and first separator that it finds in the column's parsed data (v2.13)."group-separator-n"("n"can be any number) - group the rows using the nth separated group in the column (v2.13)*."group-letter"(same as"group-letter-1") - group the rows using the first letter it finds in the column's parsed data."group-letter-n"("n"can be any number) - group the rows using letters 1 through n (if n = 2, then it's the first 2 letters) in the column's parsed data."group-number"(same as"group-number-1") - group the rows by the number it finds in the column (step of one)."group-number-n"("n"can be any number) - group the rows into blocks of every n values. So, if n = 10, the groups will be 0-9, 10-19, 20-29, etc"group-date"- group the rows by full date (this shows the current UTC time corrected for your time zone)"group-date-year"- group the rows by year"group-date-month"- group the rows by month*"group-date-day"- group the rows by month/day*"group-date-week"- group the rows by day of the week*"group-date-time"- group the rows by time*"group-false"- disable grouping of rows for a column (v2.11).
Demo
Numeric column: (includes subtotals)Animals column:
Date column:
| Quality (number) | Numeric (every 10) | Priority (letter) | Animals (first letter) | Natural Sort (first word) | Inputs (second word) | Date (Full) | |
|---|---|---|---|---|---|---|---|
| Quality | Numeric | Priority | Animals | Natural Sort | Inputs | Date | |
| 1 | 10 | Koala | abc 123 | 1/13/2013 12:01 AM | |||
| 3 | 29 | Kangaroo | abc 1 | 1/15/2013 | |||
| 2 | 10 | Ant | abc 9 | 1/13/2013 | |||
| 3 | 81 | Bee | zyx 24 | 1/11/2013 | |||
| 3 | 21 | Aardwolf | zyx 55 | 1/13/2013 03:30 AM | |||
| 1 | 3 | Bear | abc 11 | 1/15/2013 | |||
| 4 | 12 | Armadillo | zyx 2 | 1/15/2013 12:30 PM | |||
| 2 | 56 | Aardvark | abc 2 | 1/22/2013 | |||
| 1 | 55 | Lion | abc 9 | 2/15/2013 | |||
| 4 | 87 | Anteater | ABC 10 | 1/3/2013 | |||
| 2 | 98 | Lemur | zyx 1 | 1/11/2013 | |||
| 1 | 20 | Llama | zyx 12 | 12/13/2012 |
Page Header
<!-- Tablesorter: required --> <link href="../css/theme.blue.css" rel="stylesheet"> <script src="../js/jquery.tablesorter.js"></script> <script src="../js/jquery.tablesorter.widgets.js"></script> <!-- Grouping widget --> <script src="../js/parsers/parser-input-select.js"></script> <script src="../js/widgets/widget-grouping.js"></script>