ajaxProcessing return optional jQuery object; updated error handling & theme css

This commit is contained in:
Mottie 2013-05-07 10:13:50 -05:00
parent 800d602786
commit 10f24c922a
12 changed files with 168 additions and 82 deletions

View File

@ -1,6 +1,6 @@
/*! /*!
* tablesorter pager plugin * tablesorter pager plugin
* updated 4/12/2013 * updated 5/7/2013
*/ */
/*jshint browser:true, jquery:true, unused:false */ /*jshint browser:true, jquery:true, unused:false */
;(function($) { ;(function($) {
@ -100,7 +100,7 @@
tc = table.config, tc = table.config,
f = $(table).hasClass('hasFilters') && !c.ajaxUrl; f = $(table).hasClass('hasFilters') && !c.ajaxUrl;
c.totalPages = Math.ceil( c.totalRows / c.size ); // needed for "pageSize" method c.totalPages = Math.ceil( c.totalRows / c.size ); // needed for "pageSize" method
c.filteredRows = (f) ? tc.$tbodies.children('tr:not(.' + (tc.widgetOptions && tc.widgetOptions.filter_filteredRow || 'filtered') + ',' + tc.selectorRemove + ')').length : c.totalRows; c.filteredRows = (f) ? tc.$tbodies.eq(0).children('tr:not(.' + (tc.widgetOptions && tc.widgetOptions.filter_filteredRow || 'filtered') + ',' + tc.selectorRemove + ')').length : c.totalRows;
c.filteredPages = (f) ? Math.ceil( c.filteredRows / c.size ) : c.totalPages; c.filteredPages = (f) ? Math.ceil( c.filteredRows / c.size ) : c.totalPages;
if ( Math.min( c.totalPages, c.filteredPages ) > 0 ) { if ( Math.min( c.totalPages, c.filteredPages ) > 0 ) {
t = (c.size * c.page > c.filteredRows); t = (c.size * c.page > c.filteredRows);
@ -137,7 +137,7 @@
}, },
fixHeight = function(table, c) { fixHeight = function(table, c) {
var d, h, $b = $(table.tBodies[0]); var d, h, $b = table.config.$tbodies.eq(0);
if (c.fixedHeight) { if (c.fixedHeight) {
$b.find('tr.pagerSavedHeightSpacer').remove(); $b.find('tr.pagerSavedHeightSpacer').remove();
h = $.data(table, 'pagerSavedHeight'); h = $.data(table, 'pagerSavedHeight');
@ -151,7 +151,7 @@
}, },
changeHeight = function(table, c) { changeHeight = function(table, c) {
var $b = $(table.tBodies[0]); var $b = table.config.$tbodies.eq(0);
$b.find('tr.pagerSavedHeightSpacer').remove(); $b.find('tr.pagerSavedHeightSpacer').remove();
$.data(table, 'pagerSavedHeight', $b.height()); $.data(table, 'pagerSavedHeight', $b.height());
fixHeight(table, c); fixHeight(table, c);
@ -162,7 +162,7 @@
if (!c.ajaxUrl) { if (!c.ajaxUrl) {
var i, var i,
tc = table.config, tc = table.config,
rows = tc.$tbodies.children('tr:not(.' + tc.cssChildRow + ')'), rows = tc.$tbodies.eq(0).children('tr:not(.' + tc.cssChildRow + ')'),
l = rows.length, l = rows.length,
s = ( c.page * c.size ), s = ( c.page * c.size ),
e = s + c.size, e = s + c.size,
@ -189,23 +189,45 @@
} }
}, },
renderAjax = function(data, table, c, exception){ renderAjax = function(data, table, c, xhr, exception){
// process data // process data
if ( typeof(c.ajaxProcessing) === "function" ) { if ( typeof(c.ajaxProcessing) === "function" ) {
// ajaxProcessing result: [ total, rows, headers ] // ajaxProcessing result: [ total, rows, headers ]
var i, j, hsh, $f, $sh, th, d, l, var i, j, hsh, $f, $sh, th, d, l, $err,
$t = $(table), $t = $(table),
tc = table.config, tc = table.config,
hl = $t.find('thead th').length, tds = '', hl = $t.find('thead th').length, tds = '',
err = '<tr class="' + c.cssErrorRow + ' ' + tc.selectorRemove.replace(/(tr)?\./g,'') + '"><td style="text-align: center;" colspan="' + hl + '">' + result = c.ajaxProcessing(data, table) || [ 0, [] ],
(exception ? exception.message + ' (' + exception.name + ')' : 'No rows found') + '</td></tr>',
result = c.ajaxProcessing(data) || [ 0, [] ],
// allow [ total, rows, headers ] or [ rows, total, headers ] // allow [ total, rows, headers ] or [ rows, total, headers ]
t = isNaN(result[0]) && !isNaN(result[1]); t = isNaN(result[0]) && !isNaN(result[1]);
c.totalRows = result[t ? 1 : 0] || 0;
$t.find('thead tr.' + c.cssErrorRow).remove(); // Clean up any previous error.
if ( exception ) {
$err = $('<tr class="' + c.cssErrorRow + '"><td style="text-align:center;" colspan="' + hl + '">' + (
xhr.status === 0 ? 'Not connected, verify Network' :
xhr.status === 404 ? 'Requested page not found [404]' :
xhr.status === 500 ? 'Internal Server Error [500]' :
exception === 'parsererror' ? 'Requested JSON parse failed' :
exception === 'timeout' ? 'Time out error' :
exception === 'abort' ? 'Ajax Request aborted' :
'Uncaught error: ' + xhr.statusText + ' [' + xhr.status + ']' ) + '</td></tr>')
.click(function(){
$(this).remove();
})
// add error row to thead instead of tbody, or clicking on the header will result in a parser error
.appendTo( $t.find('thead:first') );
tc.$tbodies.eq(0).empty();
} else {
c.totalRows = result[t ? 1 : 0] || c.totalRows || 0;
d = result[t ? 0 : 1] || []; // row data d = result[t ? 0 : 1] || []; // row data
l = d.length; l = d.length;
th = result[2]; // headers th = result[2]; // headers
if (d instanceof jQuery) {
// append jQuery object
tc.$tbodies.eq(0).empty().append(d);
} else if (d.length) {
// build table from array
if ( l > 0 ) { if ( l > 0 ) {
for ( i = 0; i < l; i++ ) { for ( i = 0; i < l; i++ ) {
tds += '<tr>'; tds += '<tr>';
@ -216,10 +238,13 @@
tds += '</tr>'; tds += '</tr>';
} }
} }
// add rows to first tbody
tc.$tbodies.eq(0).html( tds );
}
// only add new header text if the length matches // only add new header text if the length matches
if ( th && th.length === hl ) { if ( th && th.length === hl ) {
hsh = $t.hasClass('hasStickyHeaders'); hsh = $t.hasClass('hasStickyHeaders');
$sh = $t.find('.' + ((tc.widgetOptions && tc.widgetOptions.stickyHeaders) || 'tablesorter-stickyheader')); $sh = hsh ? tc.$sticky.children('thead:first').children().children() : '';
$f = $t.find('tfoot tr:first').children(); $f = $t.find('tfoot tr:first').children();
$t.find('th.' + tc.cssHeader).each(function(j){ $t.find('th.' + tc.cssHeader).each(function(j){
var $t = $(this), icn; var $t = $(this), icn;
@ -228,23 +253,18 @@
icn = $t.find('.' + tc.cssIcon).clone(true); icn = $t.find('.' + tc.cssIcon).clone(true);
$t.find('.tablesorter-header-inner').html( th[j] ).append(icn); $t.find('.tablesorter-header-inner').html( th[j] ).append(icn);
if ( hsh && $sh.length ) { if ( hsh && $sh.length ) {
icn = $sh.find('th').eq(j).find('.' + tc.cssIcon).clone(true); icn = $sh.eq(j).find('.' + tc.cssIcon).clone(true);
$sh.find('th').eq(j).find('.tablesorter-header-inner').html( th[j] ).append(icn); $sh.eq(j).find('.tablesorter-header-inner').html( th[j] ).append(icn);
} }
} else { } else {
$t.find('.tablesorter-header-inner').html( th[j] ); $t.find('.tablesorter-header-inner').html( th[j] );
$sh.find('th').eq(j).find('.tablesorter-header-inner').html( th[j] ); if (hsh && $sh.length) {
$sh.eq(j).find('.tablesorter-header-inner').html( th[j] );
}
} }
$f.eq(j).html( th[j] ); $f.eq(j).html( th[j] );
}); });
} }
$t.find('thead tr.' + c.cssErrorRow).remove(); // Clean up any previous error.
if ( exception ) {
// add error row to thead instead of tbody, or clicking on the header will result in a parser error
$t.find('thead').append(err);
} else {
$(table.tBodies[0]).html( tds ); // add rows to first tbody
} }
if (tc.showProcessing) { if (tc.showProcessing) {
$.tablesorter.isProcessing(table); // remove loading icon $.tablesorter.isProcessing(table); // remove loading icon
@ -263,20 +283,21 @@
getAjax = function(table, c){ getAjax = function(table, c){
var url = getAjaxUrl(table, c), var url = getAjaxUrl(table, c),
$doc = $(document),
tc = table.config; tc = table.config;
if ( url !== '' ) { if ( url !== '' ) {
if (tc.showProcessing) { if (tc.showProcessing) {
$.tablesorter.isProcessing(table, true); // show loading icon $.tablesorter.isProcessing(table, true); // show loading icon
} }
$(document).bind('ajaxError.pager', function(e, xhr, settings, exception) { $doc.bind('ajaxError.pager', function(e, xhr, settings, exception) {
if (settings.url === url) { if (url.match(settings.url)) {
renderAjax(null, table, c, exception); renderAjax(null, table, c, xhr, exception);
$(document).unbind('ajaxError.pager'); $doc.unbind('ajaxError.pager');
} }
}); });
$.getJSON(url, function(data) { $.getJSON(url, function(data) {
renderAjax(data, table, c); renderAjax(data, table, c);
$(document).unbind('ajaxError.pager'); $doc.unbind('ajaxError.pager');
}); });
} }
}, },
@ -318,8 +339,7 @@
renderTable = function(table, rows, c) { renderTable = function(table, rows, c) {
c.isDisabled = false; // needed because sorting will change the page and re-enable the pager c.isDisabled = false; // needed because sorting will change the page and re-enable the pager
var i, j, o, var i, j, o, $tb,
f = document.createDocumentFragment(),
l = rows.length, l = rows.length,
s = ( c.page * c.size ), s = ( c.page * c.size ),
e = ( s + c.size ); e = ( s + c.size );
@ -331,17 +351,16 @@
if ( e > rows.length ) { if ( e > rows.length ) {
e = rows.length; e = rows.length;
} }
$(table.tBodies[0]).addClass('tablesorter-hidden');
$.tablesorter.clearTableBody(table); $.tablesorter.clearTableBody(table);
$tb = $.tablesorter.processTbody(table, table.config.$tbodies.eq(0), true);
for ( i = s; i < e; i++ ) { for ( i = s; i < e; i++ ) {
o = rows[i]; o = rows[i];
l = o.length; l = o.length;
for ( j = 0; j < l; j++ ) { for ( j = 0; j < l; j++ ) {
f.appendChild(o[j]); $tb.appendChild(o[j]);
} }
} }
table.tBodies[0].appendChild(f); $.tablesorter.processTbody(table, $tb, false);
$(table.tBodies[0]).removeClass('tablesorter-hidden');
} }
if ( c.page >= c.totalPages ) { if ( c.page >= c.totalPages ) {
moveToLastPage(table, c); moveToLastPage(table, c);
@ -361,7 +380,7 @@
c.page = 0; c.page = 0;
c.size = c.totalRows; c.size = c.totalRows;
c.totalPages = 1; c.totalPages = 1;
$('tr.pagerSavedHeightSpacer', table.tBodies[0]).remove(); $(table).find('tr.pagerSavedHeightSpacer').remove();
renderTable(table, table.config.rowsCopy, c); renderTable(table, table.config.rowsCopy, c);
} }
// disable size selector // disable size selector

View File

@ -172,3 +172,9 @@ caption {
-o-transition: height 0.1s ease; -o-transition: height 0.1s ease;
transition: height 0.1s ease; transition: height 0.1s ease;
} }
/* ajax error row */
.tablesorter .tablesorter-errorRow td {
cursor: pointer;
background-color: #e6bf99;
}

View File

@ -207,3 +207,9 @@ caption {
-o-transition: height 0.1s ease; -o-transition: height 0.1s ease;
transition: height 0.1s ease; transition: height 0.1s ease;
} }
/* ajax error row */
.tablesorter .tablesorter-errorRow td {
cursor: pointer;
background-color: #e6bf99;
}

View File

@ -131,3 +131,9 @@ caption {
.tablesorter-bootstrap .tablesorter-pager .pagedisplay { .tablesorter-bootstrap .tablesorter-pager .pagedisplay {
border: 0; border: 0;
} }
/* ajax error row */
.tablesorter .tablesorter-errorRow td {
cursor: pointer;
background-color: #e6bf99;
}

View File

@ -173,3 +173,9 @@ caption {
-o-transition: height 0.1s ease; -o-transition: height 0.1s ease;
transition: height 0.1s ease; transition: height 0.1s ease;
} }
/* ajax error row */
.tablesorter .tablesorter-errorRow td {
cursor: pointer;
background-color: #e6bf99;
}

View File

@ -175,3 +175,9 @@ caption {
-o-transition: height 0.1s ease; -o-transition: height 0.1s ease;
transition: height 0.1s ease; transition: height 0.1s ease;
} }
/* ajax error row */
.tablesorter .tablesorter-errorRow td {
cursor: pointer;
background-color: #e6bf99;
}

View File

@ -193,3 +193,9 @@ caption {
-o-transition: height 0.1s ease; -o-transition: height 0.1s ease;
transition: height 0.1s ease; transition: height 0.1s ease;
} }
/* ajax error row */
.tablesorter .tablesorter-errorRow td {
cursor: pointer;
background-color: #e6bf99;
}

View File

@ -190,3 +190,9 @@ caption {
-o-transition: height 0.1s ease; -o-transition: height 0.1s ease;
transition: height 0.1s ease; transition: height 0.1s ease;
} }
/* ajax error row */
.tablesorter .tablesorter-errorRow td {
cursor: pointer;
background-color: #e6bf99;
}

View File

@ -226,3 +226,9 @@ caption {
-o-transition: height 0.1s ease; -o-transition: height 0.1s ease;
transition: height 0.1s ease; transition: height 0.1s ease;
} }
/* ajax error row */
.tablesorter .tablesorter-errorRow td {
cursor: pointer;
background-color: #e6bf99;
}

View File

@ -181,3 +181,9 @@ caption {
-o-transition: height 0.1s ease; -o-transition: height 0.1s ease;
transition: height 0.1s ease; transition: height 0.1s ease;
} }
/* ajax error row */
.tablesorter .tablesorter-errorRow td {
cursor: pointer;
background-color: #e6bf99;
}

View File

@ -137,3 +137,9 @@ caption {
-o-transition: height 0.1s ease; -o-transition: height 0.1s ease;
transition: height 0.1s ease; transition: height 0.1s ease;
} }
/* ajax error row */
.tablesorter .tablesorter-errorRow td {
cursor: pointer;
background-color: #e6bf99;
}

View File

@ -27,10 +27,11 @@
@bodyBackground : #fff; @bodyBackground : #fff;
@bodyTextColor : #000; @bodyTextColor : #000;
@headerSortUp : lighten(spin(@headerBackground, 5), 10%); /* desaturate(@headerBackground, 10%); */ @headerAsc : darken(spin(@headerBackground, 5), 10%); /* darken(@headerBackground, 10%); */
@headerSortDown : darken(spin(@headerBackground, -5), 10%); /* darken(@headerSortUp, 5%); */ @headerDesc : lighten(spin(@headerBackground, -5), 10%); /* desaturate(@headerAsc, 5%); */
@captionBackground : #fff; /* it might be best to match the document body background color here */ @captionBackground : #fff; /* it might be best to match the document body background color here */
@errorBackground : #e6bf99; /* ajax error message (added to thead) */
@filterCellBackground : #eee; @filterCellBackground : #eee;
@filterElementTextColor: #333; @filterElementTextColor: #333;
@ -90,15 +91,15 @@
/* black */ /* black */
@unsortedBlack : url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==); @unsortedBlack : url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
@sortUpBlack : url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7); @sortAscBlack : url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
@sortDownBlack : url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7); @sortDescBlack : url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
@filterIconBlack : url(data:image/gif;base64,R0lGODlhCgAMALMAAEpKSklJSUNDQ0FBQUBAQDk5OTc3NzY2NiQkJP///wAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAAkALAAAAAAKAAwAAAQnEMlJk72YamQE+KBgJEcAAsFxFWeBJcRHvInxjfRHW/oODLsEEBMBADs=); @filterIconBlack : url(data:image/gif;base64,R0lGODlhCgAMALMAAEpKSklJSUNDQ0FBQUBAQDk5OTc3NzY2NiQkJP///wAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAAkALAAAAAAKAAwAAAQnEMlJk72YamQE+KBgJEcAAsFxFWeBJcRHvInxjfRHW/oODLsEEBMBADs=);
/* white */ /* white */
@unsortedWhite : url(data:image/gif;base64,R0lGODlhFQAJAIAAAP///////yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==); @unsortedWhite : url(data:image/gif;base64,R0lGODlhFQAJAIAAAP///////yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
@sortUpWhite : url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7); @sortAscWhite : url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
@sortDownWhite : url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7); @sortDescWhite : url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
@filterIconWhite : url(data:image/gif;base64,R0lGODlhCgANALMAAP////r6+u7u7ufn5+Hh4d3d3cXFxb+/v76+vru7u7m5uf///wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAA0AAAQpUMhJl72YanEG+OBwLEkAAkFyGaeBLcVXvAvyIfTy5TrAAwQeQcEjYiIAOw==); @filterIconWhite : url(data:image/gif;base64,R0lGODlhCgANALMAAP////r6+u7u7ufn5+Hh4d3d3cXFxb+/v76+vru7u7m5uf///wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAA0AAAQpUMhJl72YanEG+OBwLEkAAkFyGaeBLcVXvAvyIfTy5TrAAwQeQcEjYiIAOw==);
@ -111,20 +112,20 @@
background-image: @unsortedWhite; background-image: @unsortedWhite;
color: lighten(@headerTextColor, 90%); color: lighten(@headerTextColor, 90%);
} }
.sortUp (@a) when (lightness(@a) >= 50%) { .sortAsc (@a) when (lightness(@a) >= 50%) {
background-image: @sortUpBlack; background-image: @sortAscBlack;
color: @headerTextColor; color: @headerTextColor;
} }
.sortUp (@a) when (lightness(@a) < 50%) { .sortAsc (@a) when (lightness(@a) < 50%) {
background-image: @sortUpWhite; background-image: @sortAscWhite;
color: lighten(@headerTextColor, 90%); color: lighten(@headerTextColor, 90%);
} }
.sortDown (@a) when (lightness(@a) >= 50%) { .sortDesc (@a) when (lightness(@a) >= 50%) {
background-image: @sortDownBlack; background-image: @sortDescBlack;
color: @headerTextColor; color: @headerTextColor;
} }
.sortDown (@a) when (lightness(@a) < 50%) { .sortDesc (@a) when (lightness(@a) < 50%) {
background-image: @sortDownWhite; background-image: @sortDescWhite;
color: lighten(@headerTextColor, 90%); color: lighten(@headerTextColor, 90%);
} }
.filterIcon (@a) when (lightness(@a) >= 50%) { .filterIcon (@a) when (lightness(@a) >= 50%) {
@ -181,19 +182,19 @@
padding: @overallPadding; padding: @overallPadding;
} }
.tablesorter-headerSortUp { .tablesorter-headerAsc {
background-color: @headerSortUp; background-color: @headerAsc;
.sortUp(@headerBackground); .sortAsc(@headerBackground);
} }
.tablesorter-headerSortDown { .tablesorter-headerDesc {
background-color: @headerSortDown; background-color: @headerDesc;
.sortDown(@headerBackground); .sortDesc(@headerBackground);
} }
/* tfoot */ /* tfoot */
tfoot .tablesorter-headerSortUp, tfoot .tablesorter-headerAsc,
tfoot .tablesorter-headerSortDown { tfoot .tablesorter-headerDesc {
/* remove sort arrows from footer */ /* remove sort arrows from footer */
background-image: none; background-image: none;
} }
@ -316,4 +317,10 @@
filter: alpha(opacity=0); filter: alpha(opacity=0);
} }
/* ajax error row */
.tablesorter-errorRow td {
cursor: pointer;
background-color: @errorBackground;
}
} }