mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-10-08 13:44:18 +00:00
412 lines
20 KiB
HTML
412 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<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>
|
|
|
|
<!-- Demo stuff -->
|
|
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/cupertino/jquery-ui.css">
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/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 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>
|
|
|
|
<!-- Tablesorter: required -->
|
|
<link rel="stylesheet" href="../css/theme.blue.css">
|
|
<script src="../js/jquery.tablesorter.js"></script>
|
|
|
|
<!-- grouping widget -->
|
|
<script src="../js/parsers/parser-input-select.js"></script>
|
|
<script src="../js/widgets/widget-grouping.js"></script>
|
|
|
|
<script>
|
|
$(function(){
|
|
$('.accordion').accordion({
|
|
heightStyle: 'content',
|
|
collapsible : true
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<script id="js">$(function(){
|
|
|
|
$("table").tablesorter({
|
|
theme : 'blue',
|
|
headers: {
|
|
0: { sorter: 'checkbox' },
|
|
3: { sorter: 'select' },
|
|
6: { sorter: 'inputs' }
|
|
},
|
|
widgets: ['group'],
|
|
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_count : ' ({num})', // if not false, the "{num}" string is replaced with the number of rows in the group
|
|
// change these default date names based on your language preferences
|
|
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' ],
|
|
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
|
|
if (col === 7 && txt.indexOf('GMT') > 0) {
|
|
// remove "GMT-0000 (Xxxx Standard Time)" from the end of the full date
|
|
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 += parseInt( $(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 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>.</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 shift key while clicking on a group header.</li>
|
|
<li>This widget now works properly with the pager addon (pager addon updated).</li>
|
|
</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>
|
|
</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>" ({num})"</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>
|
|
<li>group date/time options - Name arrays included so that the language of the date groups can be modified easily. Defaults (English):
|
|
<ul>
|
|
<li><code>group_months</code> (<code>[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]</code>) - Month names.</li>
|
|
<li><code>group_week</code> (<code>[ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]</code>) - Named days of the week.</li>
|
|
<li><code>group_time</code> (<code>[ "AM", "PM" ]</code>) - Time of day.</li>
|
|
</ul>
|
|
</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>
|
|
<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 clss="version">v2.12</span>.
|
|
<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>
|
|
</li>
|
|
</li>
|
|
<li><code>group_complete</code> (<code>"groupingComplete"</code>) - event triggered on the table when the grouping widget has finished work <span clss="version">v2.12</span>.</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>"group-word"</code> (same as <code>"group-word-1"</code>) - group the rows using the first word it finds in the column's parsed data.</li>
|
|
<li><code>"group-word-n"</code> (<code>"n"</code> can be any number) - group the rows using the nth word in the column<span class="remark">*</span>.</li>
|
|
<li><code>"group-letter"</code> (same as <code>"group-letter-1"</code>) - group the rows using the first letter it finds in the column's parsed data.</li>
|
|
<li><code>"group-letter-n"</code> (<code>"n"</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>"group-number"</code> (same as <code>"group-number-1"</code>) - group the rows by the number it finds in the column (step of one).</li>
|
|
<li><code>"group-number-n"</code> (<code>"n"</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>"group-date"</code> - group the rows by full date (this shows the current UTC time corrected for your time zone)</li>
|
|
<li><code>"group-date-year"</code> - group the rows by year</li>
|
|
<li><code>"group-date-month"</code> - group the rows by month<span class="remark">*</span></li>
|
|
<li><code>"group-date-day"</code> - group the rows by month/day<span class="remark">*</span></li>
|
|
<li><code>"group-date-week"</code> - group the rows by day of the week<span class="remark">*</span></li>
|
|
<li><code>"group-date-time"</code> - group the rows by time<span class="remark">*</span></li>
|
|
<li><code>"group-false"</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>
|
|
|
|
</p>
|
|
|
|
<h1>Demo</h1>
|
|
|
|
<span class="label">Numeric column:</span> <div id="slider0"></div> <span class="numberclass"></span> (includes subtotals)<br>
|
|
<span class="label">Animals column:</span> <div id="slider1"></div> <span class="animalclass"></span><br>
|
|
<span class="label">Date column:</span> <div id="slider2"></div> <span class="dateclass"></span>
|
|
|
|
<div id="demo"><table class="tablesorter">
|
|
<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"><!-- Tablesorter: required -->
|
|
<link rel="stylesheet" href="../css/theme.blue.css">
|
|
<script src="../js/jquery.tablesorter.js"></script>
|
|
|
|
<!-- Grouping widget -->
|
|
<script src="../js/parsers/parser-input-select.js"></script>
|
|
<script src="../js/widgets/widget-grouping.js"></script>
|
|
|
|
<script>
|
|
$(function(){
|
|
|
|
$("table").tablesorter({
|
|
theme : 'blue',
|
|
headers: {
|
|
0: { sorter: 'checkbox' },
|
|
3: { sorter: 'select' },
|
|
6: { sorter: 'inputs' }
|
|
},
|
|
widgets: ['group'],
|
|
widgetOptions: {
|
|
group_collapsible : true, // make the group header clickable and collapse the rows below it.
|
|
group_collapsed : false, // start with all groups collapsed
|
|
group_count : ' ({num})', // if not false, the "{num}" string is replaced with the number of rows in the group
|
|
// change these default date names based on your language preferences
|
|
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' ],
|
|
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
|
|
if (col === 7 && txt.indexOf('GMT') > 0) {
|
|
// remove "GMT-0000 (xxxx Standard Time)" from the end of the full date
|
|
txt = txt.substring(0, txt.indexOf('GMT'));
|
|
}
|
|
// If there are empty cells, name the group "Empty"
|
|
return txt === "" ? "Empty" : txt;
|
|
},
|
|
// add a group total to the "Numeric" column
|
|
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 += parseInt( $(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></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 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>
|