tablesorter/docs/example-widget-grouping.html

381 lines
20 KiB
HTML
Raw Normal View History

2013-03-26 21:08:44 +00:00
<!DOCTYPE html>
<html>
<head>
2013-11-14 01:55:43 +00:00
<meta charset="utf-8">
2013-03-26 21:08:44 +00:00
<title>jQuery plugin: Tablesorter 2.0 - Grouping Rows Widget</title>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
2013-03-26 21:08:44 +00:00
<!-- Demo stuff -->
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
2013-03-26 21:08:44 +00:00
<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 id="css">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>
2013-03-26 21:08:44 +00:00
<!-- Tablesorter: required -->
2013-11-14 01:55:43 +00:00
<link href="../css/theme.blue.css" rel="stylesheet">
2013-03-26 21:08:44 +00:00
<script src="../js/jquery.tablesorter.js"></script>
2013-11-14 01:55:43 +00:00
<script src="../js/jquery.tablesorter.widgets.js"></script>
2013-03-26 21:08:44 +00:00
<!-- grouping widget -->
<script src="../js/parsers/parser-input-select.js"></script>
<script src="../js/widgets/widget-grouping.js"></script>
<script id="js">$(function(){
$("table").tablesorter({
2013-11-14 01:55:43 +00:00
theme : "blue",
2013-03-26 21:08:44 +00:00
headers: {
2013-11-14 01:55:43 +00:00
0: { sorter: "checkbox" },
3: { sorter: "select" },
6: { sorter: "inputs" }
2013-03-26 21:08:44 +00:00
},
2013-11-14 01:55:43 +00:00
widgets: [ "group", "columns", "zebra" ],
2013-03-26 21:08:44 +00:00
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)
2013-11-14 01:55:43 +00:00
group_count : " ({num})", // if not false, the "{num}" string is replaced with the number of rows in the group
2013-03-26 21:08:44 +00:00
// change these default date names based on your language preferences
2013-11-14 01:55:43 +00:00
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" ],
// 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();
},
2013-03-26 21:08:44 +00:00
group_formatter : function(txt, col, table, c, wo) {
// txt = current text; col = current column
// table = current table (DOM); c = table.config; wo = table.config.widgetOptions
2013-11-14 01:55:43 +00:00
if (col === 7 && txt.indexOf("GMT") > 0) {
2013-03-26 21:08:44 +00:00
// remove "GMT-0000 (Xxxx Standard Time)" from the end of the full date
2013-11-14 01:55:43 +00:00
txt = txt.substring(0, txt.indexOf("GMT"));
2013-03-26 21:08:44 +00:00
}
// If there are empty cells, name the group "Empty"
return txt === "" ? "Empty" : txt;
},
2013-11-14 01:55:43 +00:00
group_callback : function($cell, $rows, column, table){
// callback allowing modification of the group header labels
2013-11-14 01:55:43 +00:00
// $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(){
2013-11-14 01:55:43 +00:00
subtotal += parseInt( $(this).find("td").eq(column).text() );
});
2013-11-14 01:55:43 +00:00
$cell.find(".group-count").append("; subtotal: " + subtotal );
}
},
// event triggered on the table when the grouping widget has finished work
2013-11-14 01:55:43 +00:00
group_complete : "groupingComplete"
2013-03-26 21:08:44 +00:00
}
});
});</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 class="accordion">
<h3><a href="#">Notes</a></h3>
<div>
2013-03-26 21:08:44 +00:00
<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>.</li>
2013-11-14 01:55:43 +00:00
<li>In <span class="version">v2.14</span>, added
<ul>
<li><code>group_dateString</code> option which is a function that allows you to format the date string when using the <code>group-date</code> header class name. This is the default function:
<pre class="prettyprint lang-js">group_dateString : function(date) { 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.</li>
</ul>
</li>
2013-10-31 00:11:33 +00:00
<li>In <span class="version">v2.13</span>, added <code>group_separator</code> option &amp; <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> &amp; <code>group_complete</code> options. See options section below for details.</li>
<li>In <span class="version">v2.11</span>:
2013-03-26 21:08:44 +00:00
<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>
2013-11-14 01:55:43 +00:00
<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>
2013-03-26 21:08:44 +00:00
</ul>
</li>
<li>Clicking on any of the sortable header cells will cause the column below it to sort and add a group header.</li>
2013-03-26 21:08:44 +00:00
</ul>
</div>
<h3><a href="#">Options</a></h3>
<div>
<h3>Group widget default options (added inside of tablesorter <code>widgetOptions</code>)</h3>
<ul>
<li><code>group_collapsible</code> (<code>true</code>) - when <code>true</code>, the group headers become clickable and collapse the rows below it.</li>
<li><code>group_collapsed</code> (<code>false</code>) - 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>).</li>
<li><code>group_count</code> (<code>&quot; ({num})&quot;</code>) - 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.</li>
2013-10-21 01:10:33 +00:00
<li><code>group_callback</code> (<code>null</code>) - 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>.
<ul>
2013-10-21 01:10:33 +00:00
<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>
</li>
2013-10-21 01:10:33 +00:00
<li><code>group_complete</code> (<code>&quot;groupingComplete&quot;</code>) - event triggered on the table when the grouping widget has finished work <span class="version">v2.12</span>.</li>
<li><code>group_formatter</code> (<code>null</code>) - use this function to modify the group header text before it gets applied. 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 data from <code>table.config</code>.</li>
<li><code>wo</code> - table widget options from <code>table.config.widgetOptions</code>.</li>
</ul>
</li>
2013-10-31 00:11:33 +00:00
<li><code>group_separator</code> (<code>&quot;-&quot;</code>) - 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>.</li>
2013-10-21 01:10:33 +00:00
<li>group date/time options - Name arrays included so that the language of the date groups can be modified easily. Defaults (English):
<ul>
2013-10-21 01:10:33 +00:00
<li><code>group_months</code> (<code>[ &quot;Jan&quot;, &quot;Feb&quot;, &quot;Mar&quot;, &quot;Apr&quot;, &quot;May&quot;, &quot;Jun&quot;, &quot;Jul&quot;, &quot;Aug&quot;, &quot;Sep&quot;, &quot;Oct&quot;, &quot;Nov&quot;, &quot;Dec&quot; ]</code>) - Month names.</li>
<li><code>group_week</code> (<code>[ &quot;Sunday&quot;, &quot;Monday&quot;, &quot;Tuesday&quot;, &quot;Wednesday&quot;, &quot;Thursday&quot;, &quot;Friday&quot;, &quot;Saturday&quot; ]</code>) - Named days of the week.</li>
<li><code>group_time</code> (<code>[ &quot;AM&quot;, &quot;PM&quot; ]</code>) - Time of day.</li>
</ul>
</li>
</ul>
</div>
<h3><a href="#">Header Class Names</a></h3>
<div>
<h3>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>):</h3>
<ul>
<li><code>&quot;group-word&quot;</code> (same as <code>&quot;group-word-1&quot;</code>) - group the rows using the first word it finds in the column's parsed data.</li>
<li><code>&quot;group-word-n&quot;</code> (<code>&quot;n&quot;</code> can be any number) - group the rows using the nth word in the column<span class="remark">*</span>.</li>
2013-10-31 00:11:33 +00:00
<li><code>&quot;group-separator&quot;</code> (same as <code>&quot;group-separator-1&quot;</code>) - group the rows using the text between the start and first separator that it finds in the column's parsed data (<span class="version">v2.13</span>).</li>
<li><code>&quot;group-separator-n&quot;</code> (<code>&quot;n&quot;</code> can be any number) - group the rows using the nth separated group in the column (<span class="version">v2.13</span>)<span class="remark">*</span>.</li>
<li><code>&quot;group-letter&quot;</code> (same as <code>&quot;group-letter-1&quot;</code>) - group the rows using the first letter it finds in the column's parsed data.</li>
<li><code>&quot;group-letter-n&quot;</code> (<code>&quot;n&quot;</code> 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.</li>
<li><code>&quot;group-number&quot;</code> (same as <code>&quot;group-number-1&quot;</code>) - group the rows by the number it finds in the column (step of one).</li>
<li><code>&quot;group-number-n&quot;</code> (<code>&quot;n&quot;</code> 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</li>
<li><code>&quot;group-date&quot;</code> - group the rows by full date (this shows the current UTC time corrected for your time zone)</li>
<li><code>&quot;group-date-year&quot;</code> - group the rows by year</li>
<li><code>&quot;group-date-month&quot;</code> - group the rows by month<span class="remark">*</span></li>
<li><code>&quot;group-date-day&quot;</code> - group the rows by month/day<span class="remark">*</span></li>
<li><code>&quot;group-date-week&quot;</code> - group the rows by day of the week<span class="remark">*</span></li>
<li><code>&quot;group-date-time&quot;</code> - group the rows by time<span class="remark">*</span></li>
<li><code>&quot;group-false&quot;</code> - disable grouping of rows for a column (<span class="version">v2.11</span>).</li>
</ul>
<span class="remark">*</span> When sorting some columns, different group headers with the same group name may exist (try "group-date-week" and "group-date-time"). To make these columns sort specifically by the group you want, you'll need to modify the parser.
</div>
</div>
2013-03-26 21:08:44 +00:00
</p>
<h1>Demo</h1>
2013-11-19 19:46:59 +00:00
<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>
2013-03-26 21:08:44 +00:00
2013-03-27 23:13:44 +00:00
<div id="demo"><table class="tablesorter">
2013-03-26 21:08:44 +00:00
<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-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</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</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 03: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>
<h1>Page Header</h1>
<div>
<pre class="prettyprint lang-html">&lt;!-- Tablesorter: required --&gt;
2013-11-14 01:55:43 +00:00
&lt;link href=&quot;../css/theme.blue.css&quot; rel=&quot;stylesheet&quot;&gt;
2013-03-26 21:08:44 +00:00
&lt;script src=&quot;../js/jquery.tablesorter.js&quot;&gt;&lt;/script&gt;
2013-11-14 01:55:43 +00:00
&lt;script src=&quot;../js/jquery.tablesorter.widgets.js&quot;&gt;&lt;/script&gt;
2013-03-26 21:08:44 +00:00
&lt;!-- Grouping widget --&gt;
&lt;script src=&quot;../js/parsers/parser-input-select.js&quot;&gt;&lt;/script&gt;
2013-11-14 01:55:43 +00:00
&lt;script src=&quot;../js/widgets/widget-grouping.js&quot;&gt;&lt;/script&gt;</pre>
</div>
2013-03-26 21:08:44 +00:00
2013-11-14 01:55:43 +00:00
<h1>Script</h1>
<div id="javascript">
<pre class="prettyprint lang-js"></pre>
2013-03-26 21:08:44 +00:00
</div>
2013-11-14 01:55:43 +00:00
2013-03-26 21:08:44 +00:00
<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 startBlock = 10,
startVal = 1,
curGroup = 0,
numcol = 2,
letcol = 4,
datecol = 7,
dateGroups = [ '', 'year', 'month', 'day', 'week', 'time' ];
// Numeric column slider
$( "#slider0" ).slider({
value: startBlock,
min: 10,
max: 50,
step: 10,
create: function(){
$('.numberclass').html(' "group-number-' + startBlock + '"');
$('.tablesorter-header-inner:eq(' + numcol + ')').find('span').html(startBlock);
},
slide: function( event, ui ) {
$('table')[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 + '"');
$('.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 + '"');
$('.tablesorter-header-inner:eq(' + letcol + ')').find('span').html(startVal === 1 ? 'letter' : startVal + ' letters');
},
slide: function( event, ui ) {
$('table')[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 + '"');
$('.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: 5,
step: 1,
create: function(){
$('.dateclass').html(' "group-date' + (curGroup > 0 ? '-' + dateGroups[curGroup] : '') + '"');
$('.tablesorter-header-inner:eq(' + datecol + ')').find('span').html(curGroup === 0 ? 'full' : dateGroups[curGroup]);
},
slide: function( event, ui ) {
$('table')[0].config.$headers.eq(datecol)
.attr('class', function(i,v){
return v.replace(/group-date(-\w+)?/, 'group-date' + (ui.value > 0 ? '-' + dateGroups[ui.value] : ''));
})
.trigger('sorton', [ [[datecol,0]] ]);
$('.dateclass').html(' "group-date' + (ui.value > 0 ? '-' + dateGroups[ui.value] : '') + '"');
$('.tablesorter-header-inner:eq(' + datecol + ')').find('span').html(ui.value === 0 ? 'full' : dateGroups[ui.value]);
}
});
});
</script>
</div>
</body>
</html>