mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-11-15 23:54:22 +00:00
975 lines
50 KiB
HTML
975 lines
50 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery tablesorter 2.0 - Grouping Rows Widget</title>
|
|
|
|
<!-- jQuery -->
|
|
<script src="js/jquery-latest.min.js"></script>
|
|
|
|
<!-- Demo stuff -->
|
|
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
|
<script src="js/jquery-ui.min.js"></script>
|
|
<link rel="stylesheet" href="css/jq.css">
|
|
<link href="css/prettify.css" rel="stylesheet">
|
|
<script src="js/prettify.js"></script>
|
|
<script src="js/docs.js"></script>
|
|
|
|
<style>
|
|
/* remove messed up row hovering on this info table */
|
|
table.classes tr:hover td {
|
|
background: #fff !important;
|
|
}
|
|
</style>
|
|
|
|
<style id="css">/* CSS from widget.grouping.css (added v2.28.4) */
|
|
tr.group-header td {
|
|
background: #eee;
|
|
}
|
|
.group-name {
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
}
|
|
.group-count {
|
|
color: #999;
|
|
}
|
|
.group-hidden {
|
|
display: none;
|
|
}
|
|
.group-header, .group-header td {
|
|
user-select: none;
|
|
-moz-user-select: none;
|
|
}
|
|
/* collapsed arrow */
|
|
tr.group-header td i {
|
|
display: inline-block;
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 4px solid transparent;
|
|
border-bottom: 4px solid #888;
|
|
border-right: 4px solid #888;
|
|
border-left: 4px solid transparent;
|
|
margin-right: 7px;
|
|
user-select: none;
|
|
-moz-user-select: none;
|
|
}
|
|
tr.group-header.collapsed td i {
|
|
border-top: 5px solid transparent;
|
|
border-bottom: 5px solid transparent;
|
|
border-left: 5px solid #888;
|
|
border-right: 0;
|
|
margin-right: 10px;
|
|
}</style>
|
|
|
|
<!-- Tablesorter: required -->
|
|
<link href="../css/theme.blue.css" rel="stylesheet">
|
|
<script src="../js/jquery.tablesorter.js"></script>
|
|
<script src="../js/widgets/widget-filter.js"></script>
|
|
|
|
<!-- grouping widget -->
|
|
<!-- <link href="../css/widget.grouping.css" rel="stylesheet"> (added above) -->
|
|
<script src="../js/parsers/parser-input-select.js"></script>
|
|
<script src="../js/parsers/parser-date-weekday.js"></script>
|
|
<script src="../js/widgets/widget-grouping.js"></script>
|
|
<script src="../js/widgets/widget-storage.js"></script>
|
|
|
|
<script id="js">$(function() {
|
|
|
|
$("#groups").tablesorter({
|
|
theme : "blue",
|
|
headers: {
|
|
0: { sorter: "checkbox" },
|
|
3: { sorter: "select" },
|
|
6: { sorter: "inputs" }
|
|
// 7: defaults to "shortDate", but set to "weekday-index" ("group-date-weekday") or "time" ("group-date-time")
|
|
},
|
|
widgets: [ "group", "columns", "filter", "zebra" ],
|
|
widgetOptions: {
|
|
group_collapsible : true, // make the group header clickable and collapse the rows below it.
|
|
group_collapsed : false, // start with all groups collapsed (if true)
|
|
group_saveGroups : true, // remember collapsed groups
|
|
group_saveReset : '.group_reset', // element to clear saved collapsed groups
|
|
group_count : " ({num})", // if not false, the "{num}" string is replaced with the number of rows in the group
|
|
|
|
// apply the grouping widget only to selected column
|
|
group_forceColumn : [], // only the first value is used; set as an array for future expansion
|
|
group_enforceSort : true, // only apply group_forceColumn when a sort is applied to the table
|
|
|
|
// checkbox parser text used for checked/unchecked values
|
|
group_checkbox : [ 'checked', 'unchecked' ],
|
|
|
|
// change these default date names based on your language preferences (see Globalize section for details)
|
|
group_months : [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
|
|
group_week : [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ],
|
|
group_time : [ "AM", "PM" ],
|
|
|
|
// use 12 vs 24 hour time
|
|
group_time24Hour : false,
|
|
// group header text added for invalid dates
|
|
group_dateInvalid : 'Invalid Date',
|
|
|
|
// this function is used when "group-date" is set to create the date string
|
|
// you can just return date, date.toLocaleString(), date.toLocaleDateString() or d.toLocaleTimeString()
|
|
// reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#Conversion_getter
|
|
group_dateString : function(date) {
|
|
return date.toLocaleString();
|
|
},
|
|
|
|
group_formatter : function(txt, col, table, c, wo, data) {
|
|
// txt = current text; col = current column
|
|
// table = current table (DOM); c = table.config; wo = table.config.widgetOptions
|
|
// data = group data including both group & row data
|
|
if (col === 7 && txt.indexOf("GMT") > 0) {
|
|
// remove "GMT-0000 (Xxxx Standard Time)" from the end of the full date
|
|
// this code is needed if group_dateString returns date.toString(); (not localeString)
|
|
txt = txt.substring(0, txt.indexOf("GMT"));
|
|
}
|
|
// If there are empty cells, name the group "Empty"
|
|
return txt === "" ? "Empty" : txt;
|
|
},
|
|
|
|
group_callback : function($cell, $rows, column, table) {
|
|
// callback allowing modification of the group header labels
|
|
// $cell = current table cell (containing group header cells ".group-name" & ".group-count"
|
|
// $rows = all of the table rows for the current group; table = current table (DOM)
|
|
// column = current column being sorted/grouped
|
|
if (column === 2) {
|
|
var subtotal = 0;
|
|
$rows.each(function() {
|
|
subtotal += parseFloat( $(this).find("td").eq(column).text() );
|
|
});
|
|
$cell.find(".group-count").append("; subtotal: " + subtotal );
|
|
}
|
|
},
|
|
// event triggered on the table when the grouping widget has finished work
|
|
group_complete : "groupingComplete"
|
|
}
|
|
});
|
|
|
|
});</script>
|
|
</head>
|
|
<body id="group">
|
|
<div id="banner">
|
|
<h1>table<em>sorter</em></h1>
|
|
<h2>Grouping Rows Widget</h2>
|
|
<h3>Flexible client-side table sorting</h3>
|
|
<a href="index.html">Back to documentation</a>
|
|
</div>
|
|
<div id="main">
|
|
|
|
<p></p>
|
|
<br>
|
|
|
|
<div id="root" class="accordion">
|
|
|
|
<h3><a href="#">Notes</a></h3>
|
|
<div>
|
|
<ul>
|
|
<li>This widget will <strong>only work</strong> in tablesorter version 2.8+ and jQuery version 1.7+.</li>
|
|
<li>Please do not use this widget in very large tables (it might be really slow) <del>or when your table includes multiple tbodies</del>.<br><br></li>
|
|
|
|
<li>In <span class="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>In <span class="version updated">v2.27.6</span>, added <code>group-date-hour</code> group type to the Header Class Names.</li>
|
|
<li>In <span class="version updated">v2.25.4</span>, the zebra widget is reapplied to the table after opening a collapsed group.</li>
|
|
<li>In <span class="version">v2.24.1</span>
|
|
<ul>
|
|
<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>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>In <span class="version">v2.24.0</span>
|
|
<ul>
|
|
<li>This widget now works properly when used with a pager that has the `removeRows` option set to `true`.</li>
|
|
<li>Added <code>group_time24Hour</code> (set 12 vs 24 hour time) & <code>group_dateInvalid</code> (group header text) options.</li>
|
|
<li>Improved compatibility of the group widget with jQuery Globalize.</li>
|
|
<li>The <code>group_months</code> option will now accept a zero or one-based array or object of month names.</li>
|
|
<li>The <code>group_week</code> option will now accept an object using three-letter English weekday abbreviations as a key.</li>
|
|
<li>The <code>group_time</code> option will now accept an object using "am" or "pm" as a key.</li>
|
|
<li>For more detail, see the description column for the option in the Options section below.</li>
|
|
<li>For information on how to load & use Globalize, see the Globalization section below.</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="accordion start-closed">
|
|
<h3 id="old-notes"><a href="#">Older Notes</a></h3>
|
|
<div>
|
|
<ul>
|
|
<li>In <span class="version">v2.23.3</span>
|
|
<ul>
|
|
<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 <span class="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 <span class="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 <span class="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 <span class="version">v2.14</span>, added <code>group_dateString</code> option. More details are included in the "Options" section.</li>
|
|
<li>In <span class="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 <a href="example-parsers-file-type.html">file type parser demo</a>.</li>
|
|
<li>In <span class="version">v2.12</span>, added <code>group_callback</code> & <code>group_complete</code> options. See options section below for details.</li>
|
|
<li>In <span class="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>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3><a href="#">Options</a></h3>
|
|
<div>
|
|
<h4>Group widget default options (added inside of tablesorter <code>widgetOptions</code>)</h4>
|
|
<div class="tip">
|
|
<span class="label label-info">TIP!</span> Click on the link in the option column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
|
|
</div>
|
|
<table class="tablesorter-blue options">
|
|
<thead>
|
|
<tr><th>Option</th><th>Default</th><th class="sorter-false">Description</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr id="group_collapsible">
|
|
<td><span class="permalink">group_collapsible</span></td>
|
|
<td><code>true</code></td>
|
|
<td>
|
|
when <code>true</code>, the group headers become clickable and collapse the rows below it.
|
|
</td>
|
|
</tr>
|
|
<tr id="group_collapsed">
|
|
<td><span class="permalink">group_collapsed</span></td>
|
|
<td><code>false</code></td>
|
|
<td>
|
|
when <code>true</code> and <code>group_collapsible</code> is also <code>true</code>, all groups will start collapsed (<span class="version">v2.11</span>)
|
|
</td>
|
|
</tr>
|
|
<tr id="group_savegroups">
|
|
<td><a href="#" class="permalink">group_saveGroups</a></td>
|
|
<td><code>true</code></td>
|
|
<td>Remember collapsed groups (<span class="version">v2.15.6</span>)
|
|
<div class="collapsible">
|
|
<ul>
|
|
<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>
|
|
</ul>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr id="group_savereset">
|
|
<td><a href="#" class="permalink">group_saveReset</a></td>
|
|
<td><code>null</code></td>
|
|
<td>Element used to clear saved collapsed groups (<span class="version">v2.15.6</span>)
|
|
<div class="collapsible">
|
|
<ul>
|
|
<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>
|
|
</ul>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr id="group_count">
|
|
<td><a href="#" class="permalink">group_count</a></td>
|
|
<td><code>" ({num})"</code></td>
|
|
<td>
|
|
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.
|
|
<div class="collapsible">
|
|
<p><span class="label warning">*NOTE*</span> The value that replaces the <code>{num}</code> placeholder only counts the number of <em>visible</em> rows.</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr id="group_separator">
|
|
<td><a href="#" class="permalink">group_separator</a></td>
|
|
<td><code>"-"</code></td>
|
|
<td>
|
|
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 <span class="version">v2.13</span>.<br>
|
|
<div class="collapsible">
|
|
<br>
|
|
If your content has mixed separators (e.g. <code>images/cats/burger-time.jpg</code>), you can set this option to use a regular expression:
|
|
<pre class="prettyprint lang-js">// the above example becomes: ["images", "cats", "burger-time", "jpg"]
|
|
group_separator : /[/.]/</pre>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr id="group_formatter">
|
|
<td><a href="#" class="permalink">group_formatter</a></td>
|
|
<td><code>null</code></td>
|
|
<td>
|
|
Use this function to modify the group header text before it gets applied.
|
|
<div class="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.
|
|
<ul>
|
|
<li><code>txt</code> - current text of the group header.</li>
|
|
<li><code>col</code> - current table column being grouped (zero-based index).</li>
|
|
<li><code>table</code> - current table (DOM).</li>
|
|
<li><code>c</code> - table configuration data from <code>table.config</code>.</li>
|
|
<li><code>wo</code> - table widget options from <code>table.config.widgetOptions</code>.</li>
|
|
<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) <span class="label warning">Do not change</span> - Current group header index.</li>
|
|
<li><code>data.groupClass</code> - (Array) <span class="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) <span class="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) <span class="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) <span class="label warning">Do not use</span> This value is immediately replaced by the <code>group_formatter</code> returned value.</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<pre class="prettyprint lang-js">group_formatter : function(txt, col, table, c, wo, data) {
|
|
// If there are empty cells, name the group "Empty"
|
|
return txt === "" ? "Empty" : txt;
|
|
}</pre>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr id="group_callback">
|
|
<td><a href="#" class="permalink">group_callback</a></td>
|
|
<td><code>null</code></td>
|
|
<td>
|
|
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 <span class="version">v2.12</span>.
|
|
<div class="collapsible">
|
|
<ul>
|
|
<li><code>$cell</code> - current group header table cell (jQuery object).</li>
|
|
<li><code>$rows</code> - current group rows (jQuery object).</li>
|
|
<li><code>column</code> - current table column being grouped (zero-based index).</li>
|
|
<li><code>table</code> - current table (DOM).</li>
|
|
</ul>
|
|
<pre class="prettyprint lang-js">group_callback : function($cell, $rows, column, table) {
|
|
$cell.find('.group-name').append(' group'); // adds "group" to the end of the group name
|
|
}</pre>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr id="group_complete">
|
|
<td><a href="#" class="permalink">group_complete</a></td>
|
|
<td><code>"groupingComplete"</code></td>
|
|
<td>
|
|
Event triggered on the table when the grouping widget has finished work <span class="version">v2.12</span>.
|
|
<div class="collapsible">
|
|
<pre class="prettyprint lang-js">$('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');
|
|
});</pre>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="group_forcecolumn">
|
|
<td><a href="#" class="permalink">group_forceColumn</a></td>
|
|
<td><code>[]</code></td>
|
|
<td>
|
|
Force the group widget to only apply to one column (<span class="version">v2.23.3</span>).
|
|
<div class="collapsible">
|
|
<p>When this option is set, only the first value in the array is used; <em>it is set up as an array for future expansion</em>.</p>
|
|
<p>When set, the set column will be the only column grouped by this widget.</p>
|
|
<p>If the <code>group_enforceSort</code> option is set to <code>false</code>, the column will be grouped without a sort applied to the table.</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="group_enforcesort">
|
|
<td><span class="permalink">group_enforceSort</span></td>
|
|
<td><code>true</code></td>
|
|
<td>
|
|
Only allow <code>group_forceColumn</code> to work when a sort is applied to the table (<span class="version">v2.23.3</span>).
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="group_checkbox">
|
|
<td><a href="#" class="permalink">group_checkbox</a></td>
|
|
<td>(see description)</td>
|
|
<td>
|
|
Set checkbox parser text (<span class="version">v2.21.0</span>)
|
|
<div class="collapsible">
|
|
<br>
|
|
The checkbox parser in the "parser-input-select.js" file will use this option to set the group header text displayed for a checkbox state.
|
|
<p></p>
|
|
Defaults are: <code>[ "checked", "unchecked" ]</code>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="group_months">
|
|
<td><a href="#" class="permalink">group_months</a></td>
|
|
<td>(see description)</td>
|
|
<td>
|
|
Name arrays included so that the language of the date groups can be modified easily (<span class="version updated">v2.24.0</span>; see "Globalization" section for details).
|
|
<div class="collapsible">
|
|
<p>Showing defaults (English):</p>
|
|
<pre class="prettyprint lang-js">// zero-based array
|
|
group_months: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]</pre>
|
|
As of <span class="version">v2.24.0</span>, this option will also work with an object with a one-base "index":
|
|
<pre class="prettyprint lang-js">// get Months list from CLDR (see Globalization section for more info)
|
|
var months = new Cldr( 'en' ).main([ "dates/calendars/gregorian/months", "format", "abbreviated" ]);
|
|
// one-based object (CLDR output example)
|
|
// months = { 1: "Jan", 2: "Feb", 3: "Mar", 4: "Apr", 5: "May", 6: "Jun", 7: "Jul", 8: "Aug", 9: "Sep", 10: "Oct", 11: "Nov", 12: "Dec" }
|
|
// then in the widgetOptions,
|
|
group_months: months</pre>
|
|
A one-based array of month names will also work.
|
|
<pre class="prettyprint lang-js">group_months: [ "", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]</pre>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="group_week">
|
|
<td><a href="#" class="permalink">group_week</a></td>
|
|
<td>(see description)</td>
|
|
<td>
|
|
Name arrays included so that the language of the date groups can be modified easily (<span class="version updated">v2.24.0</span>; see "Globalization" for details).
|
|
<div class="collapsible">
|
|
<p>Showing defaults (English):</p>
|
|
<pre class="prettyprint lang-js">// zero-based index
|
|
group_week: [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]</pre>
|
|
As of <span class="version">v2.24.0</span>, this option will also work with an object using a three-letter English weekday abbreviated names as a key:
|
|
<pre class="prettyprint lang-js">// get weekdays list from CLDR (see Globalization section for more info)
|
|
var weekdays = new Cldr( 'en' ).main([ "dates/calendars/gregorian/days", "format", "abbreviated" ]);
|
|
// week-abbreviation based object
|
|
// weekdays = { sun: "Sun", mon: "Mon", tue: "Tue", wed: "Wed", thu: "Thu", fri: "Fri", sat: "Sat" }
|
|
// then in the widgetOptions,
|
|
group_week: weekdays</pre>
|
|
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.
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="group_time">
|
|
<td><a href="#" class="permalink">group_time</a></td>
|
|
<td>(see description)</td>
|
|
<td>
|
|
Name arrays included so that the language of the date groups can be modified easily (<span class="version updated">v2.24.0</span>; see "Globalization" for details).
|
|
<div class="collapsible">
|
|
<p>Defaults (English):</p>
|
|
<pre class="prettyprint lang-js">group_time: [ "AM", "PM" ]</pre>
|
|
As of <span class="version">v2.24.0</span>, this option will also work with an object in this format:
|
|
<pre class="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.
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="group_time24hour">
|
|
<td><span class="permalink">group_time24Hour</span></td>
|
|
<td><code>false</code></td>
|
|
<td>Set to <code>true</code> to display time in 24 hour format (<span class="version">v2.24.0</span>).</td>
|
|
</tr>
|
|
|
|
<tr id="group_dateinvalid">
|
|
<td><span class="permalink">group_dateInvalid</span></td>
|
|
<td><code>'Invalid Date'</code></td>
|
|
<td>Message added to the Group header if a date is invalid (<span class="version">v2.24.0</span>).</td>
|
|
</tr>
|
|
|
|
<tr id="group_datestring">
|
|
<td><a href="#" class="permalink">group_dateString</a></td>
|
|
<td>(see description)</td>
|
|
<td>
|
|
When the <code>"group-date"</code> class name is set on a column, this function is used to format the date string (<span class="version updated">v2.24.0</span>).
|
|
<div class="collapsible">
|
|
<p>This is the default function:</p>
|
|
<pre class="prettyprint lang-js">// you can just return date, date.toLocaleString(), date.toLocaleDateString() or d.toLocaleTimeString()
|
|
group_dateString : function(date, config, $header ) {
|
|
return date.toLocaleString();
|
|
}</pre>
|
|
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 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#Conversion_getter">this reference</a> for more details.
|
|
<p>In <span class="version">v2.24.0</span>, this widget was updated to make it easier to use with <a href="https://github.com/jquery/globalize">jQuery Globalize</a>.</p>
|
|
<p>Additionally, two new parameters were added: <a href="index.html#config"><code>config</code></a> and <code>$header</code> (a jQuery object of the associated header cell).</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h3><a href="#">Header Class Names</a></h3>
|
|
<div>
|
|
<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>
|
|
<table class="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 (<span class="version">v2.11</span>).</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td rowspan="5">Text</td>
|
|
<td><code>"group-text"</code></td>
|
|
<td>Group the rows using all of the text from the column's parsed data.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>"group-word"</code></td>
|
|
<td>Group the rows using the first word it finds in the column's parsed data (same as <code>"group-word-1"</code>).</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>"group-word-n"</code><span class="remark">*</span></td>
|
|
<td>Group the rows using the nth word in the column (<code>"n"</code> can be any number).</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>"group-letter"</code></td>
|
|
<td>Group the rows using the first letter it finds in the column's parsed data (same as <code>"group-letter-1"</code>).</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>"group-letter-n"</code><span class="remark">*</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>
|
|
<td rowspan="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>
|
|
</tr>
|
|
<tr>
|
|
<td><code>"group-number-n"</code><span class="remark">*</span></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>
|
|
<td rowspan="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>) (<span class="version">v2.13</span>).</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>"group-separator-n"</code><span class="remark">*</span></td>
|
|
<td>Group the rows using the nth separated group in the column (<code>"n"</code> can be any number) (<span class="version">v2.13</span>).</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td rowspan="8">Date</td>
|
|
<td><code>"group-date"</code></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>
|
|
</tr>
|
|
<tr>
|
|
<td><code>"group-date-year"</code><span class="remark">*</span></td>
|
|
<td>Group the rows by year - <code>"sorter-shortDate"</code> parser needed.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>"group-date-month"</code><span class="remark">*</span></td>
|
|
<td>Group the rows by month - <code>"sorter-shortDate"</code> parser needed.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>"group-date-monthyear"</code><span class="remark">*</span></td>
|
|
<td>Group the rows by month & year - <code>"sorter-shortDate"</code> parser needed.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>"group-date-day"</code><span class="remark">*</span></td>
|
|
<td>Group the rows by month/day - <code>"sorter-shortDate"</code> parser needed.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>"group-date-week"</code><span class="remark">*</span></td>
|
|
<td>Group the rows by day of the week - <code>"sorter-weekday-index"</code> parser needed.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>"group-date-time"</code><span class="remark">*</span></td>
|
|
<td>Group the rows by time - <code>"sorter-time"</code> parser needed.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>"group-date-hour"</code><span class="remark">*</span></td>
|
|
<td>Group the rows by each hour - <code>"sorter-time"</code> parser needed.</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
<span class="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>
|
|
</div>
|
|
|
|
<h3><a href="#">Methods</a></h3>
|
|
<div>
|
|
<h3>Toggle all Groups</h3>
|
|
Target the group header(s) and trigger a "toggleGroup" event to show/hide rows associated with that group.
|
|
|
|
<pre class="prettyprint lang-js">// "toggle" class name added to a button/link
|
|
$('.toggle').click(function() {
|
|
// show/hide all groups - table must be grouped (sorted or force grouping)
|
|
$('table').find('.group-header').trigger('toggleGroup');
|
|
return false;
|
|
});</pre>
|
|
</div>
|
|
|
|
<h3><a href="#">Globalization</a></h3>
|
|
<div>
|
|
<h3>jQuery Globalize</h3>
|
|
These instructions are specific to <a href="https://github.com/jquery/globalize">jQuery Globalize</a>.
|
|
<p><a href="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>
|
|
<h4>Make sure to include files from:</h4>
|
|
<ul>
|
|
<li>jQuery Globalize:
|
|
<ul>
|
|
<li>Process CLDR data into usable formats.</li>
|
|
<li>Install from npm (<code>npm install globalize cldr-data</code>), bower (<code>bower install globalize</code>), or</li>
|
|
<li>Download from <a href="https://github.com/jquery/globalize">https://github.com/jquery/globalize</a>.</li>
|
|
<li>Depending on the data in your table, you'll need to <a href="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 (<a href="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):
|
|
<pre class="prettyprint lang-html"><script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.0.0/globalize.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.0.0/globalize/currency.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.0.0/globalize/number.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.0.0/globalize/date.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.0.0/globalize/message.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.0.0/globalize/plural.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.0.0/globalize/relative-time.min.js"></script>
|
|
</pre>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>cldrjs:
|
|
<ul>
|
|
<li>Needed by Globalize to traverse CLDR data.</li>
|
|
<li>Install from npm (<code>npm install cldrjs</code>), bower (<code>bower install cldrjs</code>), or</li>
|
|
<li>Download from <a href="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):
|
|
<pre class="prettyprint lang-html"><script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.3/cldr.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.3/cldr/event.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.3/cldr/supplemental.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.3/cldr/unresolved.min.js"></script>
|
|
</pre>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>CLDR data:
|
|
<ul>
|
|
<li>Needed by Globalize & cldrjs.</li>
|
|
<li>Install from npm (<code>npm install cldr-data</code>), bower (<code>bower install cldr-data</code>), or</li>
|
|
<li>Find the latest version from here: <a href="http://cldr.unicode.org/index/downloads">http://cldr.unicode.org/index/downloads</a></li>
|
|
<li>And download the files from here: <a href="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 <a href="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 <a href="https://github.com/jquery/globalize/blob/master/doc/cldr.md#how-do-i-load-cldr-data-into-globalize">this page</a> for more details.
|
|
|
|
<pre class="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
|
|
// right MIME type for .json files.
|
|
var files = [];
|
|
if ( !hasInitialized ) {
|
|
files = [
|
|
/* core */
|
|
$.getJSON( 'cldr-data/supplemental/likelySubtags.json' ),
|
|
/* currency */
|
|
$.getJSON( 'cldr-data/supplemental/currencyData.json' ),
|
|
/* date */
|
|
$.getJSON( 'cldr-data/supplemental/timeData.json' ),
|
|
$.getJSON( 'cldr-data/supplemental/weekData.json' ),
|
|
/* number */
|
|
$.getJSON( 'cldr-data/supplemental/numberingSystems.json' ),
|
|
/* plural */
|
|
$.getJSON( 'cldr-data/supplemental/plurals.json' ),
|
|
$.getJSON( 'cldr-data/supplemental/ordinals.json' )
|
|
];
|
|
}
|
|
files = files.concat([
|
|
/* currency */
|
|
$.getJSON( 'cldr-data/main/' + lang + '/currencies.json' ),
|
|
/* date */
|
|
$.getJSON( 'cldr-data/main/' + lang + '/ca-gregorian.json' ),
|
|
$.getJSON( 'cldr-data/main/' + lang + '/timeZoneNames.json' ),
|
|
/* number */
|
|
$.getJSON( 'cldr-data/main/' + lang + '/numbers.json' ),
|
|
/* relative time */
|
|
$.getJSON( 'cldr-data/main/' + lang + '/dateFields.json' ),
|
|
/* unit */
|
|
$.getJSON( 'cldr-data/main/' + lang + '/units.json' )
|
|
]);
|
|
$.when
|
|
.apply( $, files )
|
|
.then( function() {
|
|
// Normalize $.get results, we only need the JSON, not the request statuses.
|
|
return [].slice.apply( arguments, [ 0 ] ).map( function( result ) {
|
|
return result[ 0 ];
|
|
});
|
|
})
|
|
.then( Globalize.load )
|
|
.then( function() {
|
|
if ( !hasInitialized ) {
|
|
// initialization code goes here
|
|
}
|
|
hasInitialized = true;
|
|
// code to run after each new language has loaded goes here
|
|
});
|
|
};
|
|
|
|
// initial language load
|
|
loadLanguage( 'en' );
|
|
});
|
|
</pre>
|
|
|
|
<h4>Usage</h4>
|
|
Use Globalize with tablesorter & the group widget inside of the <code>group_dateString</code> callback function.
|
|
<p>In <span class="version">v2.24.0</span></p>
|
|
<ul>
|
|
<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 <a href="http://jsfiddle.net/Mottie/4ac5kr3o/15/">this demo</a> using the code below</li>
|
|
</ul>
|
|
<pre class="prettyprint lang-js">$( function() {
|
|
// using an english example
|
|
var lang = 'en',
|
|
cldr = new Cldr( lang ),
|
|
// Globalize.load already done!!
|
|
globalize = Globalize.locale( lang ),
|
|
// months: CLDR returns an object { 1: "Jan", 2: "Feb", 3: "Mar", ..., 12: "Dec" }
|
|
months = cldr.main([ "dates/calendars/gregorian/months", "format", "abbreviated" ]),
|
|
// days of week: CLDR returns { sun: "Sun", mon: "Mon", tue: "Tue", wed: "Wed", thu: "Thu", ... }
|
|
week = cldr.main([ "dates/calendars/gregorian/days", "format", "abbreviated" ]),
|
|
/* time of day: CLDR returns
|
|
{ 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" } */
|
|
periods = cldr.main([ "dates/calendars/gregorian/dayPeriods", "format", "abbreviated" ]);
|
|
|
|
$( 'table' ).tablesorter({
|
|
theme : 'blue',
|
|
widgets: [ 'group', 'zebra' ],
|
|
widgetOptions : {
|
|
group_months : months,
|
|
group_week : week,
|
|
// setting group_times to an empty string forces "group-time" to use group_dateString function
|
|
group_time : periods,
|
|
group_dateString : function ( date, c, $column ) {
|
|
// see https://github.com/jquery/globalize/blob/master/doc/api/date/date-formatter.md
|
|
var hour = date.getHours(),
|
|
min = date.getMinutes(),
|
|
format = globalize.dateFormatter({ datetime: "full" })( date ),
|
|
time = globalize.dateFormatter({ time: "full" })( date );
|
|
// replace special times with time period
|
|
if ( hour === 0 && min === 0 ) {
|
|
// midnight: this method may not work in all locales!
|
|
return format.replace( time, periods.midnight );
|
|
} else if ( hour === 12 && min === 0 ) {
|
|
// noon: this method may not work in all locales!
|
|
return format.replace( time, periods.noon );
|
|
}
|
|
return format;
|
|
}
|
|
}
|
|
});
|
|
|
|
});</pre>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<p></p>
|
|
|
|
<h1>Demo</h1>
|
|
|
|
<ul>
|
|
<li>Clicking on a sortable header cells will sort the column and group the rows based on the group setting.</li>
|
|
<li>Clicking on a group header will toggle the view of the content below it.</li>
|
|
<li>Using <kbd>Shift</kbd> plus Click on a group header will toggle the view of all groups in that table.</li>
|
|
</ul>
|
|
|
|
<span class="demo-label">Numeric column:</span> <div id="slider0"></div> <span class="numberclass"></span> (includes subtotals)<br>
|
|
<span class="demo-label">Animals column:</span> <div id="slider1"></div> <span class="animalclass"></span><br>
|
|
<span class="demo-label">Date column:</span> <div id="slider2"></div> <span class="dateclass"></span><sup class="results">†</sup>
|
|
<br><br>
|
|
<button type="button" class="group_reset">Reset Saved Collapsed Groups</button>
|
|
<div id="demo"><table id="groups">
|
|
<thead>
|
|
<tr>
|
|
<th class="group-word"></th> <!-- checkbox status -->
|
|
<th class="group-number">Quality (number)</th> <!-- notice this uses the same class name as the Numeric column, it's just left at 1 -->
|
|
<th class="group-number-10">Numeric (every <span>10</span>)</th>
|
|
<th class="group-letter-1">Priority (letter)</th>
|
|
<th class="group-letter-1">Animals (first <span>letter</span>)</th>
|
|
<th class="group-word-1">Natural Sort (first word)</th>
|
|
<th class="group-word-2">Inputs (second word)</th>
|
|
<!-- try "group-date", "group-date-year", "group-date-month", "group-data-monthyear", "group-date-day", "group-date-week" or "group-date-time" -->
|
|
<th class="group-date">Date (<span>Full</span>)</th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot>
|
|
<tr>
|
|
<th></th>
|
|
<th>Quality</th>
|
|
<th>Numeric</th>
|
|
<th>Priority</th>
|
|
<th>Animals</th>
|
|
<th>Natural Sort</th>
|
|
<th>Inputs</th>
|
|
<th>Date</th>
|
|
</tr>
|
|
</tfoot>
|
|
<tbody>
|
|
<tr><td><input type="checkbox" checked></td><td>1</td><td>10</td><td><select><option selected>A</option><option>B</option><option>C</option></select></td><td>Koala</td><td>abc 123</td><td><input type="text" value="item: truck" /></td><td>1/13/2013 12:01 AM</td></tr>
|
|
<tr><td><input type="checkbox"></td><td>3</td><td>29</td><td><select><option>A</option><option>B</option><option selected>C</option></select></td><td>Kangaroo</td><td>abc 1</td><td><input type="text" value="item: car" /></td><td>1/15/2013 4:20 AM</td></tr>
|
|
<tr><td><input type="checkbox"></td><td>2</td><td>10</td><td><select><option>A</option><option>B</option><option selected>C</option></select></td><td>Ant</td><td>abc 9</td><td><input type="text" value="item: motorcycle" /></td><td>1/13/2013</td></tr>
|
|
<tr><td><input type="checkbox"></td><td>3</td><td>81</td><td><select><option>A</option><option selected>B</option><option>C</option></select></td><td>Bee</td><td>zyx 24</td><td><input type="text" value="item: golf cart" /></td><td>1/11/2013 12:45 AM</td></tr>
|
|
<tr><td><input type="checkbox" checked></td><td>3</td><td>21</td><td><select><option>A</option><option selected>B</option><option>C</option></select></td><td>Aardwolf</td><td>zyx 55</td><td><input type="text" value="item: scooter" /></td><td>1/13/2013 3:30 AM</td></tr>
|
|
<tr><td><input type="checkbox"></td><td>1</td><td>3</td><td><select><option selected>A</option><option>B</option><option>C</option></select></td><td>Bear</td><td>abc 11</td><td><input type="text" /></td><td>1/15/2013</td></tr>
|
|
<tr><td><input type="checkbox"></td><td>4</td><td>12</td><td><select><option>A</option><option selected>B</option><option>C</option></select></td><td>Armadillo</td><td>zyx 2</td><td><input type="text" /></td><td>1/15/2013 12:30 PM</td></tr>
|
|
<tr><td><input type="checkbox" checked></td><td>2</td><td>56</td><td><select><option selected>A</option><option>B</option><option>C</option></select></td><td>Aardvark</td><td>abc 2</td><td><input type="text" value="item: skateboard" /></td><td>1/22/2013</td></tr>
|
|
<tr><td><input type="checkbox"></td><td>1</td><td>55</td><td><select><option selected>A</option><option>B</option><option>C</option></select></td><td>Lion</td><td>abc 9</td><td><input type="text" /></td><td>2/15/2013</td></tr>
|
|
<tr><td><input type="checkbox" checked></td><td>4</td><td>87</td><td><select><option>A</option><option selected>B</option><option>C</option></select></td><td>Anteater</td><td>ABC 10</td><td><input type="text" value="item: skates" /></td><td>1/3/2013</td></tr>
|
|
<tr><td><input type="checkbox" checked></td><td>2</td><td>98</td><td><select><option>A</option><option>B</option><option selected>C</option></select></td><td>Lemur</td><td>zyx 1</td><td><input type="text" /></td><td>1/11/2013</td></tr>
|
|
<tr><td><input type="checkbox"></td><td>1</td><td>20</td><td><select><option>A</option><option>B</option><option selected>C</option></select></td><td>Llama</td><td>zyx 12</td><td><input type="text" /></td><td>12/13/2012</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<small><span class="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>
|
|
<p></p>
|
|
|
|
<h1>Page Header</h1>
|
|
<div>
|
|
<pre class="prettyprint lang-html"><!-- Tablesorter: required -->
|
|
<link href="css/theme.blue.css" rel="stylesheet">
|
|
<script src="js/jquery-latest.min.js"></script>
|
|
<script src="js/jquery.tablesorter.js"></script>
|
|
<script src="js/widget-filter.js"></script>
|
|
<script src="js/widget-storage.js"></script>
|
|
|
|
<!-- Grouping widget -->
|
|
<link href="css/widget.group.css" rel="stylesheet"> <!-- added v2.28.4 -->
|
|
<script src="js/parsers/parser-input-select.js"></script>
|
|
<script src="js/parsers/parser-date-weekday.js"></script>
|
|
<script src="js/widgets/widget-grouping.js"></script></pre>
|
|
</div>
|
|
|
|
<h1>Script</h1>
|
|
<div id="javascript">
|
|
<pre class="prettyprint lang-js"></pre>
|
|
</div>
|
|
|
|
<h1>CSS</h1>
|
|
<div id="css">
|
|
<pre class="prettyprint lang-css"></pre>
|
|
</div>
|
|
|
|
<h1>HTML</h1>
|
|
<div id="html">
|
|
<pre class="prettyprint lang-html"></pre>
|
|
</div>
|
|
|
|
<script>
|
|
/* DEMO ONLY CODE */
|
|
$(function() {
|
|
var $groups = $('#groups'),
|
|
startBlock = 10,
|
|
startVal = 1,
|
|
curGroup = 0,
|
|
numcol = 2,
|
|
letcol = 4,
|
|
datecol = 7,
|
|
dateGroups = [ '', 'year', 'month', 'monthyear', 'day', 'week', 'time', 'hour' ];
|
|
// Numeric column slider
|
|
$( "#slider0" ).slider({
|
|
value: startBlock,
|
|
min: 10,
|
|
max: 50,
|
|
step: 10,
|
|
create: function() {
|
|
$('.numberclass').html(' "group-number-' + startBlock + '"');
|
|
$groups.find('.tablesorter-header-inner:eq(' + numcol + ')').find('span').html(startBlock);
|
|
},
|
|
slide: function( event, ui ) {
|
|
$groups[0].config.$headers.eq(numcol)
|
|
.attr('class', function(i,v) {
|
|
return v.replace(/group-number-\d+/, 'group-number-' + ui.value);
|
|
})
|
|
.trigger('sorton', [ [[numcol,0]] ]);
|
|
$('.numberclass').html(' "group-number-' + ui.value + '"');
|
|
$groups.find('.tablesorter-header-inner:eq(' + numcol + ')').find('span').html(ui.value);
|
|
}
|
|
});
|
|
// animal (letter) column slider
|
|
$( "#slider1" ).slider({
|
|
value: startVal,
|
|
min: 1,
|
|
max: 5,
|
|
step: 1,
|
|
create: function() {
|
|
$('.animalclass').html(' "group-letter-' + startVal + '"');
|
|
$groups.find('.tablesorter-header-inner:eq(' + letcol + ')').find('span').html(startVal === 1 ? 'letter' : startVal + ' letters');
|
|
},
|
|
slide: function( event, ui ) {
|
|
$groups[0].config.$headers.eq(letcol)
|
|
.attr('class', function(i,v) {
|
|
return v.replace(/group-letter-\d+/, 'group-letter-' + ui.value);
|
|
})
|
|
.trigger('sorton', [ [[letcol,0]] ]);
|
|
$('.animalclass').html(' "group-letter-' + ui.value + '"');
|
|
$groups.find('.tablesorter-header-inner:eq(' + letcol + ')').find('span').html(ui.value === 1 ? 'letter' : ui.value + ' letters');
|
|
}
|
|
});
|
|
// date column slider
|
|
$( "#slider2" ).slider({
|
|
value: curGroup,
|
|
min: 0,
|
|
max: dateGroups.length - 1,
|
|
step: 1,
|
|
create: function() {
|
|
$('.dateclass').html(' "group-date' + (curGroup > 0 ? '-' + dateGroups[curGroup] : '') + '"');
|
|
$groups.find('.tablesorter-header-inner:eq(' + datecol + ')').find('span').html(curGroup === 0 ? 'full' : dateGroups[curGroup]);
|
|
},
|
|
slide: function( event, ui ) {
|
|
var $h = $groups[0].config.$headers.eq(datecol)
|
|
.attr('class', function(i,v) {
|
|
return v.replace(/group-date(-\w+)?/, 'group-date' + (ui.value > 0 ? '-' + dateGroups[ui.value] : ''));
|
|
});
|
|
$h.removeClass('sorter-weekday-index sorter-time');
|
|
if ( dateGroups[ui.value] === 'week' ) {
|
|
$h.addClass('sorter-weekday-index');
|
|
$groups.trigger('update', [ [[datecol,0]] ]);
|
|
} else if ( dateGroups[ui.value] === 'time' || dateGroups[ui.value] === 'hour' ) {
|
|
$h.addClass('sorter-time');
|
|
$groups.trigger('update', [ [[datecol,0]] ]);
|
|
} else {
|
|
$groups.trigger('update', [ [[datecol,0]] ]);
|
|
}
|
|
$('.dateclass').html(' "group-date' + (ui.value > 0 ? '-' + dateGroups[ui.value] : '') + '"');
|
|
$groups.find('.tablesorter-header-inner:eq(' + datecol + ')').find('span').html(ui.value === 0 ? 'full' : dateGroups[ui.value]);
|
|
}
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|