2013-03-26 21:08:44 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title > jQuery plugin: Tablesorter 2.0 - Grouping Rows Widget< / title >
<!-- jQuery -->
2013-10-02 02:51:04 +00:00
< 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.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" > t r . g r o u p - h e a d e r t d {
background: #eee;
}
.group-name {
text-transform: uppercase;
font-weight: bold;
}
.group-count {
color: #999;
}
.group-hidden {
display: none;
}
2013-10-02 02:51:04 +00:00
.group-header, .group-header td {
user-select: none;
-moz-user-select: none;
}
2013-03-26 21:08:44 +00:00
/* 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;
2013-10-02 02:51:04 +00:00
user-select: none;
-moz-user-select: none;
2013-03-26 21:08:44 +00:00
}
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;
2013-03-27 23:13:44 +00:00
}< / style >
2013-03-26 21:08:44 +00:00
<!-- 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 >
2013-10-02 02:51:04 +00:00
< script >
$(function(){
$('.accordion').accordion({
heightStyle: 'content',
collapsible : true
});
});
< / script >
2013-03-26 21:08:44 +00:00
< script id = "js" > $ ( f u n c t i o n ( ) {
$("table").tablesorter({
theme : 'blue',
headers: {
0: { sorter: 'checkbox' },
2013-03-28 23:03:32 +00:00
3: { sorter: 'select' },
2013-03-26 21:08:44 +00:00
6: { sorter: 'inputs' }
},
widgets: ['group'],
widgetOptions: {
2013-10-02 02:51:04 +00:00
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-03-26 21:08:44 +00:00
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;
2013-10-18 16:19:30 +00:00
},
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'
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" >
2013-10-02 02:51:04 +00:00
< 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 >
2013-10-02 02:51:04 +00:00
< 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-10-18 16:19:30 +00:00
< 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 >
2013-10-02 02:51:04 +00:00
< li > In < span class = "version" > v2.11< / span > :
2013-03-26 21:08:44 +00:00
< ul >
2013-10-02 02:51:04 +00:00
< 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 >
2013-03-26 21:08:44 +00:00
< / ul >
< / li >
2013-10-02 02:51:04 +00:00
< 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 >
2013-10-02 02:51:04 +00:00
< / div >
< h3 > < a href = "#" > Options< / a > < / h3 >
< div >
< h3 > Group widget default options (added inside of tablesorter < code > widgetOptions< / code > )< / h3 >
< ul >
2013-10-18 16:19:30 +00:00
< 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 >
2013-10-02 02:51:04 +00:00
< / 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 >
2013-10-18 16:19:30 +00:00
< 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 >
2013-10-02 02:51:04 +00:00
< / 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-10-18 16:19:30 +00:00
< span class = "label" > Numeric column:< / span > < div id = "slider0" > < / div > < span class = "numberclass" > < / span > (includes subtotals)< br >
2013-03-26 21:08:44 +00:00
< 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 >
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" > < !-- 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' },
2013-03-29 03:50:28 +00:00
3: { sorter: 'select' },
2013-03-26 21:08:44 +00:00
6: { sorter: 'inputs' }
},
widgets: [' group' ],
widgetOptions: {
2013-10-02 02:51:04 +00:00
group_collapsible : true, // make the group header clickable and collapse the rows below it.
group_collapsed : false, // start with all groups collapsed
2013-03-26 21:08:44 +00:00
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
2013-10-02 02:51:04 +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
txt = txt.substring(0, txt.indexOf(' GMT' ));
}
2013-10-18 16:19:30 +00:00
// If there are empty cells, name the group "Empty"
2013-03-26 21:08:44 +00:00
return txt === " " ? " Empty" : txt;
2013-10-18 16:19:30 +00:00
},
// 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'
2013-03-26 21:08:44 +00:00
}
});
2013-04-04 21:33:28 +00:00
});
< /script> < / pre >
2013-03-26 21:08:44 +00:00
< / 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 >
