Group widget + pager now works properly. See #437

This commit is contained in:
Mottie 2013-12-18 00:34:22 -06:00
parent 6a6712f55e
commit 32f1c062d8
2 changed files with 89 additions and 79 deletions

View File

@ -377,7 +377,7 @@
</ul> </ul>
</li> </li>
<li><a href="example-widget-build-table.html">Build Table Widget</a> (<span class="version">v2.11</span>).</li> <li><a href="example-widget-build-table.html">Build Table Widget</a> (<span class="version">v2.11</span>).</li>
<li><a href="example-widget-grouping.html">Grouping rows Widget</a> (v2.8; <span class="version updated">v2.14</span>).</li> <li><a href="example-widget-grouping.html">Grouping rows Widget</a> (v2.8; <span class="version updated">v2.14.6</span>).</li>
<li><a href="example-widget-grouping-filter-childrows.html">Grouping rows Widget + filter + child rows</a></li> <li><a href="example-widget-grouping-filter-childrows.html">Grouping rows Widget + filter + child rows</a></li>
<li><a href="example-widgets.html">Repeat Headers widget</a> (v2.0.5; <span class="version updated">v2.9</span>)</li> <li><a href="example-widgets.html">Repeat Headers widget</a> (v2.0.5; <span class="version updated">v2.9</span>)</li>
<li><a href="example-widget-resizable.html">Resizable Columns widget</a> (v2.0.23.1; <span class="version updated">v2.8.3</span>)</li> <li><a href="example-widget-resizable.html">Resizable Columns widget</a> (v2.0.23.1; <span class="version updated">v2.8.3</span>)</li>

View File

@ -1,4 +1,4 @@
/*! tablesorter Grouping widget - updated 11/25/2013 (core v2.14.2) /*! tablesorter Grouping widget - updated 12/18/2013 (core v2.14.6)
* Requires tablesorter v2.8+ and jQuery 1.7+ * Requires tablesorter v2.8+ and jQuery 1.7+
* by Rob Garrison * by Rob Garrison
*/ */
@ -10,6 +10,7 @@ var ts = $.tablesorter;
ts.grouping = { ts.grouping = {
types : {
number : function(c, $column, txt, num, group){ number : function(c, $column, txt, num, group){
var value, word; var value, word;
if (num > 1 && txt !== '') { if (num > 1 && txt !== '') {
@ -48,46 +49,9 @@ ts.grouping = {
('00' + time.getMinutes()).slice(-2) + ' ' + ('00' + wo.group_time[hours >= 12 ? 1 : 0]).slice(-2) : ('00' + time.getMinutes()).slice(-2) + ' ' + ('00' + wo.group_time[hours >= 12 ? 1 : 0]).slice(-2) :
wo.group_dateString(time); wo.group_dateString(time);
} }
};
ts.addWidget({
id: 'group',
priority: 100,
options: {
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
group_separator : '-', // group name separator; used when group-separator-# class is used.
group_formatter : null, // function(txt, column, table, c, wo) { return txt; }
group_callback : null, // function($cell, $rows, column, table){}, callback allowing modification of the group header labels
group_complete : 'groupingComplete', // event triggered on the table when the grouping widget has finished work
// 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' ],
// 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(); }
}, },
init: function(table, thisWidget, c, wo){
if (wo.group_collapsible) { update : function(table, c, wo){
// .on() requires jQuery 1.7+
c.$table.on('click toggleGroup', 'tr.group-header', function(event){
event.stopPropagation();
var $this = $(this);
// use shift-click to toggle ALL groups
if (event.type === 'click' && event.shiftKey) {
$this.siblings('.group-header').trigger('toggleGroup');
}
$this.toggleClass('collapsed');
// nextUntil requires jQuery 1.4+
$this.nextUntil('tr.group-header').toggleClass('group-hidden', $this.hasClass('collapsed') );
});
}
},
format: function(table, c, wo) {
if ($.isEmptyObject(c.cache)) { return; } if ($.isEmptyObject(c.cache)) { return; }
var rowIndex, tbodyIndex, currentGroup, $rows, groupClass, grouping, time, cache, var rowIndex, tbodyIndex, currentGroup, $rows, groupClass, grouping, time, cache,
lang = wo.grouping_language, lang = wo.grouping_language,
@ -116,9 +80,9 @@ ts.addWidget({
// grouping = [ 'group', '{word/separator/letter/number/date/false}', '{#/year/month/day/week/time}' ] // grouping = [ 'group', '{word/separator/letter/number/date/false}', '{#/year/month/day/week/time}' ]
grouping = groupClass ? groupClass[0].split('-') : ['','letter',1]; // default to letter 1 grouping = groupClass ? groupClass[0].split('-') : ['','letter',1]; // default to letter 1
// fixes #438 // fixes #438
if (ts.grouping[grouping[1]]) { if (ts.grouping.types[grouping[1]]) {
currentGroup = cache[rowIndex] ? currentGroup = cache[rowIndex] ?
ts.grouping[grouping[1]]( c, c.$headers.eq(column), cache[rowIndex][column], /date/.test(groupClass) ? ts.grouping.types[grouping[1]]( c, c.$headers.eq(column), cache[rowIndex][column], /date/.test(groupClass) ?
grouping[2] : parseInt(grouping[2] || 1, 10) || 1, group, lang ) : currentGroup; grouping[2] : parseInt(grouping[2] || 1, 10) || 1, group, lang ) : currentGroup;
if (group !== currentGroup) { if (group !== currentGroup) {
group = currentGroup; group = currentGroup;
@ -161,6 +125,52 @@ ts.addWidget({
$.tablesorter.benchmark("Applying groups widget: ", time); $.tablesorter.benchmark("Applying groups widget: ", time);
} }
} }
}
};
ts.addWidget({
id: 'group',
priority: 100,
options: {
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
group_separator : '-', // group name separator; used when group-separator-# class is used.
group_formatter : null, // function(txt, column, table, c, wo) { return txt; }
group_callback : null, // function($cell, $rows, column, table){}, callback allowing modification of the group header labels
group_complete : 'groupingComplete', // event triggered on the table when the grouping widget has finished work
// 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' ],
// 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(); }
},
init: function(table, thisWidget, c, wo){
if (wo.group_collapsible) {
// .on() requires jQuery 1.7+
c.$table.on('click toggleGroup', 'tr.group-header', function(event){
event.stopPropagation();
var $this = $(this);
// use shift-click to toggle ALL groups
if (event.type === 'click' && event.shiftKey) {
$this.siblings('.group-header').trigger('toggleGroup');
}
$this.toggleClass('collapsed');
// nextUntil requires jQuery 1.4+
$this.nextUntil('tr.group-header').toggleClass('group-hidden', $this.hasClass('collapsed') );
});
}
c.$table.on('pagerChange', function(){
ts.grouping.update(table, c, wo);
});
},
format: function(table, c, wo) {
ts.grouping.update(table, c, wo);
}, },
remove : function(table, c, wo){ remove : function(table, c, wo){
c.$table c.$table