<li>In <spanclass="version updated">v2.28.4</span>, added <code>widget.group.css</code> file into the <code>css</code> folder. It contains the grouping widget css shown on this page.</li>
<li>Added <code>"group-text"</code> group type to the Header Class Names. This class name will use the all of the text from the cell (this would essentially be the same as using "group-word-999").</li>
<li>Updated this demo to use the new "weekday-index" parser when the date column is set to "group-date-weekday", and to use the "time" parser when the date column is set to "group-date-time". It is not the most efficient because changing parsers requires an "update".</li>
<li>Added <code>group_forceColumn</code>&<code>group_enforceSort</code> options for force column grouping.</li>
<li>Updated method used to save collapsed groups, so any previously collapsed groups will be ignored after this update.</li>
</ul>
</li>
<li>In <spanclass="version">v2.22.0</span>, group headers are now keyboard accessible using <kbd>Tab</kbd>; and pressing <kbd>Enter</kbd> while the header has focus will toggle the group header, or use <kbd>Shift</kbd> + <kbd>Enter</kbd> to toggle all groups.</li>
<li>In <spanclass="version">v2.21.0</span>
<ul>
<li>Added <code>group_checkbox</code> option to allow setting the parsed text from the "parser-input-select.js" checkbox parser.</li>
<li>Fixed an issue with the filter widget overriding the "group-hidden" class name.</li>
</ul>
</li>
<li>In <spanclass="version">v2.15.6</span>, added <code>group_saveGroups</code>&<code>group_saveReset</code> options. More details are included in the "Options" section.</li>
<li>In <spanclass="version">v2.14</span>, added <code>group_dateString</code> option. More details are included in the "Options" section.</li>
<li>In <spanclass="version">v2.13</span>, added <code>group_separator</code> option &<code>group-separator-#</code> header class name. To see this in action, check out the <ahref="example-parsers-file-type.html">file type parser demo</a>.</li>
<li>In <spanclass="version">v2.12</span>, added <code>group_callback</code>&<code>group_complete</code> options. See options section below for details.</li>
<li>In <spanclass="version">v2.11</span>:
<ul>
<li>The grouping widget now works across multiple tbodies.</li>
<li>Added <code>group-false</code> header option which disables the grouping widget for a specific column.</li>
<li>Added the <code>group_collapsed</code> option - get more details in the options block below.</li>
<li>You can now toggle <strong>all</strong> group rows by holding down the <kbd>Shift</kbd> key while clicking on a group header.</li>
<li>This widget now works properly with the pager addon (pager addon updated).</li>
<spanclass="label label-info">TIP!</span> Click on the link in the option column to reveal full details (or <ahref="#"class="toggleAll">toggle</a>|<ahref="#"class="showAll">show</a>|<ahref="#"class="hideAll">hide</a> all) or double click to update the browser location.
when <code>true</code> and <code>group_collapsible</code> is also <code>true</code>, all groups will start collapsed (<spanclass="version">v2.11</span>)
<li>This option saves the currently collapsed groups, using the group name.</li>
<li>Collapsed groups are saved by column and group class name, so that the groups can be dynamically changed and still remember the correct collapsed groups. Try changing the group names (using the sliders) in the demo below & then collapsing some groups several times; go back to previous groups and it will remember which groups were collapsed.</li>
<li>Because the group name is saved, groups with a number range (e.g. "group-number-10"; see the "Numeric" column below) will show a different range depending on sort direction; in this situation, each sort direction is saved independently.</li>
<li>This option requires the <code>$.tablesorter.storage</code> utility contained within the <code>jquery.tablesorter.widgets.js</code> file.</li>
<li>This option should contain a jQuery selector string or jQuery object pointing to an element to be used to reset (clear) the list of collapsed groups.</li>
<li>You can also clear the saved collapsed groups by calling this function: <code>$.tablesorter.grouping.clearSavedGroups(table);</code> (table would be either the table DOM or table jQuery object).</li>
<li>This option requires the <code>$.tablesorter.storage</code> utility contained within the <code>jquery.tablesorter.widgets.js</code> file.</li>
Allows you to add custom formatting, or remove, the group count within the group header. Set it to <code>false</code> or an empty string to remove the count.
<p><spanclass="label warning">*NOTE*</span> The value that replaces the <code>{num}</code> placeholder only counts the number of <em>visible</em> rows.</p>
When the <code>group-separator</code> class name is added, it uses the setting from this option to split the table cell content for grouping <spanclass="version">v2.13</span>.<br>
Use this function to modify the group header text before it gets applied.
<divclass="collapsible">
<br>
It provides various parameters (<code>txt, col, table, c, wo</code>) to make it work for any of the table columns and data. See the comments in the example below for more details.
<li><code>data</code> - group & row data. This includes:
<ul>
<li><code>data.group</code> - (String) Current Group Name. Same as <code>txt</code>.</li>
<li><code>data.column</code> - (Number) Current column. Same as <code>col</code>.</li>
<li><code>data.$row</code> - (jQuery object) Row at the start of a group (group header is inserted before this row).</li>
<li><code>data.rowData</code> - (Array) Parsed data from <code>data.$row</code>; <code>data.rowData[ c.columns ]</code> contains raw row data & any associated child rows.</li>
<li><code>data.groupIndex</code> - (Number) <spanclass="label warning">Do not change</span> - Current group header index.</li>
<li><code>data.groupClass</code> - (Array) <spanclass="label warning">Do not change</span> - Class name applied to the header cell, e.g. <code>'group-letter-1'</code>.</li>
<li><code>data.grouping</code> - (Array) <spanclass="label warning">Do not change</span> - This is the <code>data.groupClass</code> split into its components, e.g. <code>['group','letter','1']</code>.</li>
<li><code>data.savedGroup</code> - (Boolean) <spanclass="label warning">Do not change</span> - Value is <code>true</code> if the group is collapsed & saved to storage.</li>
<li><code>data.currentGroup</code> - (String) <spanclass="label warning">Do not use</span> This value is immediately replaced by the <code>group_formatter</code> returned value.</li>
Use this function to further modify the group header to include more information (i.e. group totals). Parameters include (<code>$cell, $rows, column, table</code>). See the example below for more details <spanclass="version">v2.12</span>.
Name arrays included so that the language of the date groups can be modified easily (<spanclass="version updated">v2.24.0</span>; see "Globalization" section for details).
Name arrays included so that the language of the date groups can be modified easily (<spanclass="version updated">v2.24.0</span>; see "Globalization" for details).
At this point, if you're going to use Globalization, it would be best to use the <code>group_dateString</code> to use <code>globalize.dateFormatter</code> to format the date because not all locales start their week on Sunday.
Name arrays included so that the language of the date groups can be modified easily (<spanclass="version updated">v2.24.0</span>; see "Globalization" for details).
<preclass="prettyprint lang-js">// get time of day list from CLDR (see Globalization section for more info)
var periods = cldr.main([ "dates/calendars/gregorian/dayPeriods", "format", "abbreviated" ]);
/* time of day: CLDR returns this object:
peroids = {
afternoon1: "in the afternoon",
am: "AM",
am-alt-variant: "am",
evening1: "in the evening",
midnight: "midnight",
morning1: "in the morning",
night1: "at night",
noon: "noon",
pm: "PM",
pm-alt-variant: "pm"
}
then in the widgetOptions,*/
group_time: periods</pre>
If you want to use a time of day other than "am" or "pm", then you'll need to use the <code>group_dateString</code> to format the date; see the example in the Globalization section below.
When the <code>"group-date"</code> class name is set on a column, this function is used to format the date string (<spanclass="version updated">v2.24.0</span>).
Other functions that can be used are <code>date</code> (alone), <code>date.toLocaleString()</code>, <code>date.toLocaleDateString()</code> or <code>d.toLocaleTimeString()</code>. See <ahref="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#Conversion_getter">this reference</a> for more details.
<p>In <spanclass="version">v2.24.0</span>, this widget was updated to make it easier to use with <ahref="https://github.com/jquery/globalize">jQuery Globalize</a>.</p>
<p>Additionally, two new parameters were added: <ahref="index.html#config"><code>config</code></a> and <code>$header</code> (a jQuery object of the associated header cell).</p>
<h4>Group header class names (when changing the grouping, notice that the <em>sort doesn't change, just the position and names of the group headers</em>):</h4>
<tableclass="tablesorter-blue classes">
<thead>
<tr><th>Group type</th><th>Group class name</th><th>Description</th></tr>
</thead>
<tbody>
<tr>
<td>Disable</td>
<td><code>"group-false"</code></td>
<td>Disable grouping of rows for a column (<spanclass="version">v2.11</span>).</td>
<td>Group the rows using letters 1 through n (if n = 2, then it's the first 2 letters) in the column's parsed data (<code>"n"</code> can be any number).</td>
</tr>
<tr>
<tdrowspan="2">Number</td>
<td><code>"group-number"</code></td>
<td>Group the rows by the number it finds in the column (step of one; same as <code>"group-number-1"</code>).</td>
<td>Group the rows into blocks of every n values. So, if n = 10, the groups will be 0-9, 10-19, 20-29, etc (<code>"n"</code> can be any number).</td>
</tr>
<tr>
<tdrowspan="2">Separator</td>
<td><code>"group-separator"</code></td>
<td>Group the rows using the text between the start and first separator that it finds in the column's parsed data (same as <code>"group-separator-1"</code>) (<spanclass="version">v2.13</span>).</td>
<td>Group the rows using the nth separated group in the column (<code>"n"</code> can be any number) (<spanclass="version">v2.13</span>).</td>
<td>Group the rows by full date (this shows the current UTC time corrected for your time zone) - <code>"sorter-shortDate"</code> parser needed.</td>
<spanclass="remark">*</span> When sorting some columns, different group headers with the same group name may exist. To make these columns sort specifically by the group you want, you'll need to modify the parser.
<p>Before v2.24.1, this demo only used the "shortDate" parser on the date column, so when "group-date-week" or "group-date-time" were set, group headers would repeat.</p>
These instructions are specific to <ahref="https://github.com/jquery/globalize">jQuery Globalize</a>.
<p><ahref="http://jsfiddle.net/Mottie/4ac5kr3o/15/">Here is a demo</a> showing how all the code comes together; there is no official site with JSON files available to load into the demo, so only the required snippets of CLDR data are included in the demo.</p>
<li>Download from <ahref="https://github.com/jquery/globalize">https://github.com/jquery/globalize</a>.</li>
<li>Depending on the data in your table, you'll need to <ahref="https://github.com/jquery/globalize#pick-the-modules-you-need">pick which modules</a> to include; currently for the date module, you'll need to load the number module first (<ahref="https://github.com/jquery/globalize/issues/543">ref</a>).</li>
<li>Here is an example of how to load all files from Cdnjs (make sure to use the most recent version):
<li>Download from <ahref="https://github.com/rxaviers/cldrjs">https://github.com/rxaviers/cldrjs</a>.</li>
<li>You will likely need to include all files: <code>cldr.js</code>, <code>event.js</code>, <code>supplemental.js</code> and <code>unresolved.js</code>.</li>
<li>Here is an example of how to load all files from Cdnjs (make sure to use the most recent version):
<li>Find the latest version from here: <ahref="http://cldr.unicode.org/index/downloads">http://cldr.unicode.org/index/downloads</a></li>
<li>And download the files from here: <ahref="http://unicode.org/Public/cldr/">http://unicode.org/Public/cldr/</a> (it is really hard to find this page).</li>
<li>For more information on which json files you'll need to include, check out <ahref="https://github.com/jquery/globalize#2-cldr-content">these instructions</a>.</li>
</ul>
</li>
</ul>
<h4>Initialization</h4>
The next step is loading the CLDR data into Globalize; please see <ahref="https://github.com/jquery/globalize/blob/master/doc/cldr.md#how-do-i-load-cldr-data-into-globalize">this page</a> for more details.
<preclass="prettyprint lang-js">
// code to show how to load a language using jQuery (make sure it was loaded)
$(function() {
var hasInitialized = false,
loadLanguage = function( lang ) {
// Use $.getJSON instead of $.get if your server is not configured to return the
<li>The <code>group_months</code>, <code>group_week</code>&<code>group_time</code> options were modified to work with CLDR data.</li>
<li><code>group_months</code> option will work with either a zero-based array of month names (basic use), or an object with a key using a one-based indexed with a month name value pair (the CLDR format; see the "months" comment in code example below).</li>
<li><code>group_week</code> option will work with either a zero-based array of weekday names (basic use), or an object with a key using three letter abbreviations of English weekday names with a localized weekday name value pair (the CLDR format; see the "days of week" comment in the code below).</li>
<li><code>group_time</code> option will now accept an object using "am" or "pm" (both lower case) as a key.<br><br></li>
<li>The <code>group_dateString</code> callback function was updated with two additional parameters to allow access to table data. See the "Options" section above for more details.</li>
<li>Check out <ahref="http://jsfiddle.net/Mottie/4ac5kr3o/15/">this demo</a> using the code below</li>
<small><spanclass="results">†</span> When "group-date-week" is set, the parser is changed to "weekday-index". And when "group-date-time" is set, the "time" parser is being used. All other date column settings use the "shortDate" parser.</small>
