add processing icon

This commit is contained in:
Rob Garrison 2012-08-18 21:05:37 -05:00
parent 10c6e1a9f1
commit eac5d0e948

View File

@ -32,6 +32,7 @@
// appearance // appearance
theme : 'default', // adds tablesorter-{theme} to the table for styling theme : 'default', // adds tablesorter-{theme} to the table for styling
widthFixed : false, // adds colgroup to fix widths of columns widthFixed : false, // adds colgroup to fix widths of columns
showProcessing : true,
// functionality // functionality
cancelSelection : true, // prevent text selection in the header cancelSelection : true, // prevent text selection in the header
@ -77,6 +78,7 @@
cssHeaderRow : 'tablesorter-headerRow', cssHeaderRow : 'tablesorter-headerRow',
cssIcon : 'tablesorter-icon', // if this class exists, a <i> will be added to the header automatically cssIcon : 'tablesorter-icon', // if this class exists, a <i> will be added to the header automatically
cssInfoBlock : 'tablesorter-infoOnly', // don't sort tbody with this class name cssInfoBlock : 'tablesorter-infoOnly', // don't sort tbody with this class name
cssProcessing : 'tablesorter-processing', // processing icon applied to header during sort/filter
// selectors // selectors
selectorHeaders : '> thead th, > thead td', selectorHeaders : '> thead th, > thead td',
@ -216,6 +218,10 @@
if (tc.debug) { if (tc.debug) {
cacheTime = new Date(); cacheTime = new Date();
} }
// processing icon
if (tc.showProcessing) {
ts.isProcessing(table, true);
}
for (k = 0; k < b.length; k++) { for (k = 0; k < b.length; k++) {
tc.cache[k] = { row: [], normalized: [] }; tc.cache[k] = { row: [], normalized: [] };
// ignore tbodies with class name from css.cssInfoBlock // ignore tbodies with class name from css.cssInfoBlock
@ -244,6 +250,9 @@
} }
} }
} }
if (tc.showProcessing) {
ts.isProcessing(table); // remove processing icon
}
if (tc.debug) { if (tc.debug) {
benchmark("Building cache for " + totalRows + " rows", cacheTime); benchmark("Building cache for " + totalRows + " rows", cacheTime);
} }
@ -290,7 +299,7 @@
} }
// init flag (true) used by pager plugin to prevent widget application // init flag (true) used by pager plugin to prevent widget application
function appendToTable(table, init) { function appendToTable(table, callback, init) {
var c = table.config, var c = table.config,
b = table.tBodies, b = table.tBodies,
rows = [], rows = [],
@ -596,7 +605,7 @@
downTime = new Date().getTime(); downTime = new Date().getTime();
return e.target.tagName === "INPUT" ? '' : !c.cancelSelection; return e.target.tagName === "INPUT" ? '' : !c.cancelSelection;
} }
// prevent resizable widget from initializing a sort (long clicks are ignored) // ignore long clicks (prevents resizable widget from initializing a sort)
if (external !== true && (new Date().getTime() - downTime > 500)) { return false; } if (external !== true && (new Date().getTime() - downTime > 500)) { return false; }
if (c.delayInit && !c.cache) { buildCache($this[0]); } if (c.delayInit && !c.cache) { buildCache($this[0]); }
if (!this.sortDisabled) { if (!this.sortDisabled) {
@ -688,10 +697,13 @@
} }
// sortBegin event triggered immediately before the sort // sortBegin event triggered immediately before the sort
$this.trigger("sortBegin", $this[0]); $this.trigger("sortBegin", $this[0]);
// set css for headers // setTimeout needed so the processing icon shows up
setHeadersCss($this[0], $headers, c.sortList); setTimeout(function(){
multisort($this[0], c.sortList); // set css for headers
appendToTable($this[0]); setHeadersCss($this[0], $headers, c.sortList);
multisort($this[0], c.sortList);
appendToTable($this[0]);
}, 1);
} }
}); });
if (c.cancelSelection) { if (c.cancelSelection) {
@ -764,30 +776,31 @@
setHeadersCss(this, $headers, c.sortList); setHeadersCss(this, $headers, c.sortList);
// sort the table and append it to the dom // sort the table and append it to the dom
multisort(this, c.sortList); multisort(this, c.sortList);
appendToTable(this, init); appendToTable(this, callback, init);
if (typeof callback === "function") { if (typeof callback === "function") {
callback(this); callback(this);
} }
}) })
.bind("appendCache", function(e, init) { .bind("appendCache", function(e, callback, init) {
appendToTable(this, init); appendToTable(this, callback, init);
}) })
.bind("applyWidgetId", function(e, id) { .bind("applyWidgetId", function(e, id) {
getWidgetById(id).format(this, c, c.widgetOptions); // (table, c, wo) getWidgetById(id).format(this, c, c.widgetOptions);
}) })
.bind("applyWidgets", function(e, init) { .bind("applyWidgets", function(e, init) {
// apply widgets // apply widgets
applyWidget(this, init); applyWidget(this, init);
}) })
.bind("refreshWidgets", function(e, all){ .bind("refreshWidgets", function(e, all, dontapply){
ts.refreshWidgets(this, all); ts.refreshWidgets(this, all, dontapply);
}) })
.bind("destroy", function(e, c, cb){ .bind("destroy", function(e, c, cb){
ts.destroy(this, c, cb); ts.destroy(this, c, cb);
}); });
// get sort list from jQuery data or metadata // get sort list from jQuery data or metadata
if ($this.data() && typeof $this.data().sortlist !== 'undefined') { // in jQuery < 1.4, an error occurs when calling $this.data()
if (parseFloat($.fn.jquery) >= 1.4 && typeof $this.data().sortlist !== 'undefined') {
c.sortList = $this.data().sortlist; c.sortList = $this.data().sortlist;
} else if (m && ($this.metadata() && $this.metadata().sortlist)) { } else if (m && ($this.metadata() && $this.metadata().sortlist)) {
c.sortList = $this.metadata().sortlist; c.sortList = $this.metadata().sortlist;
@ -806,6 +819,13 @@
// do this after theme has been applied // do this after theme has been applied
fixColumnWidth(this); fixColumnWidth(this);
// show processesing icon
if (c.showProcessing) {
$this.bind('sortBegin sortEnd', function(e) {
ts.isProcessing($this[0], e.type === 'sortBegin');
});
}
// initialized // initialized
this.hasInitialized = true; this.hasInitialized = true;
if (c.debug) { if (c.debug) {
@ -829,9 +849,11 @@
// detach tbody but save the position // detach tbody but save the position
// don't use tbody because there are portions that look for a tbody index (updateCell) // don't use tbody because there are portions that look for a tbody index (updateCell)
ts.processTbody = function(table, $tb, getIt){ ts.processTbody = function(table, $tb, getIt){
var holdr; var t, holdr;
if (getIt) { if (getIt) {
return $tb.before( '<span class="tablesorter-savemyplace"/>' ).detach(); $tb.before('<span class="tablesorter-savemyplace"/>');
holdr = ($.fn.detach) ? $tb.detach() : $tb.remove();
return holdr;
} }
holdr = $(table).find('span.tablesorter-savemyplace'); holdr = $(table).find('span.tablesorter-savemyplace');
$tb.insertAfter( holdr ); $tb.insertAfter( holdr );
@ -923,7 +945,7 @@
ts.refreshWidgets = function(table, doAll, dontapply) { ts.refreshWidgets = function(table, doAll, dontapply) {
var i, c = table.config, var i, c = table.config,
cw = c.widgets, cw = c.widgets,
w = ts.widgets, l = w.length; w = ts.widgets, l = w.length; console.debug(w);
// remove previous widgets // remove previous widgets
for (i = 0; i < l; i++){ for (i = 0; i < l; i++){
if ( w[i] && w[i].id && (doAll || $.inArray( w[i].id, cw ) < 0) ) { if ( w[i] && w[i].id && (doAll || $.inArray( w[i].id, cw ) < 0) ) {
@ -936,6 +958,28 @@
} }
}; };
// add processing indicator
ts.isProcessing = function(table, toggle, $ths) {
var c = table.config,
// default to all headers
$h = $(table).find('.' + c.cssHeader);
if (toggle) {
if ($ths) {
// jQuery selected headers (filter widget)
$h = $ths;
} else if (c.sortList.length > 0) {
// get headers from the sortList
$h = $h.filter(function(){
// get data-column from attr to keep compatibility with jQuery 1.2.6
return this.sortDisabled ? false : ts.isValueInArray( parseFloat($(this).attr('data-column')), c.sortList);
});
}
$h.addClass(c.cssProcessing);
} else {
$h.removeClass(c.cssProcessing);
}
};
ts.destroy = function(table, removeClasses, callback){ ts.destroy = function(table, removeClasses, callback){
var $t = $(table), c = table.config, var $t = $(table), c = table.config,
$h = $t.find('thead:first'); $h = $t.find('thead:first');
@ -1056,7 +1100,7 @@
if (!$h.length) { return ''; } if (!$h.length) { return ''; }
m = $.metadata ? $h.metadata() : false; m = $.metadata ? $h.metadata() : false;
cl = ' ' + ($h.attr('class') || ''); cl = ' ' + ($h.attr('class') || '');
if ($h.data() && ( typeof $h.data(key) !== 'undefined' || typeof $h.data(key.toLowerCase()) !== 'undefined') ){ if (typeof $h.data(key) !== 'undefined' || typeof $h.data(key.toLowerCase()) !== 'undefined'){
// "data-lockedOrder" is assigned to "lockedorder"; but "data-locked-order" is assigned to "lockedOrder" // "data-lockedOrder" is assigned to "lockedorder"; but "data-locked-order" is assigned to "lockedOrder"
// "data-sort-initial-order" is assigned to "sortInitialOrder" // "data-sort-initial-order" is assigned to "sortInitialOrder"
val += $h.data(key) || $h.data(key.toLowerCase()); val += $h.data(key) || $h.data(key.toLowerCase());