From cb40882acc06eca49172d1ce2749ae5f889019a7 Mon Sep 17 00:00:00 2001 From: Mottie Date: Wed, 5 Feb 2014 06:10:55 -0600 Subject: [PATCH] Add showError function. Fixes #486 --- addons/pager/jquery.tablesorter.pager.js | 43 ++++++++++++++++++------ css/theme.black-ice.css | 1 + css/theme.blue.css | 1 + css/theme.bootstrap.css | 1 + css/theme.bootstrap_2.css | 1 + css/theme.dark.css | 1 + css/theme.default.css | 1 + css/theme.dropbox.css | 1 + css/theme.green.css | 1 + css/theme.grey.css | 1 + css/theme.ice.css | 1 + css/theme.jui.css | 1 + css/theme.less | 1 + docs/index.html | 26 ++++++++++++-- js/widgets/widget-pager.js | 38 ++++++++++++++++----- 15 files changed, 97 insertions(+), 22 deletions(-) diff --git a/addons/pager/jquery.tablesorter.pager.js b/addons/pager/jquery.tablesorter.pager.js index 72f47eb3..7750973c 100644 --- a/addons/pager/jquery.tablesorter.pager.js +++ b/addons/pager/jquery.tablesorter.pager.js @@ -247,26 +247,21 @@ result = p.ajaxProcessing(data, table) || [ 0, [] ], hl = $t.find('thead th').length; - $t.find('thead tr.' + p.cssErrorRow).remove(); // Clean up any previous error. + // Clean up any previous error. + ts.showError(table); if ( exception ) { if (c.debug) { ts.log('Ajax Error', xhr, exception); } - $err = $('' + - '' + ( + ts.showError(table, 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 + ']' ) + '') - .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') ); + 'Uncaught error: ' + xhr.statusText + ' [' + xhr.status + ']' ); c.$tbodies.eq(0).empty(); } else { // process ajax object @@ -757,8 +752,34 @@ }); }; - }() -}); + }() }); + + // see #486 + ts.showError = function(table, message){ + $(table).each(function(){ + var $row, + c = this.config, + errorRow = c.pager && c.pager.cssErrorRow || c.widgetOptions.pager_css && c.widgetOptions.pager_css.errorRow || 'tablesorter-errorRow'; + if (c) { + if (typeof message === 'undefined') { + c.$table.find('thead').find(c.selectorRemove).remove(); + } else { + $row = ( /tr\>/.test(message) ? $(message) : $('' + message + '') ) + .click(function(){ + $(this).remove(); + }) + // add error row to thead instead of tbody, or clicking on the header will result in a parser error + .appendTo( c.$table.find('thead:first') ) + .addClass( errorRow + ' ' + c.selectorRemove.replace(/^[.#]/, '') ) + .attr({ + role : 'alert', + 'aria-live' : 'assertive' + }); + } + } + }); + }; + // extend plugin scope $.fn.extend({ tablesorterPager: $.tablesorterPager.construct diff --git a/css/theme.black-ice.css b/css/theme.black-ice.css index 869125b4..62ca0ffb 100644 --- a/css/theme.black-ice.css +++ b/css/theme.black-ice.css @@ -176,6 +176,7 @@ caption { /* ajax error row */ .tablesorter .tablesorter-errorRow td { + text-align: center; cursor: pointer; background-color: #e6bf99; } diff --git a/css/theme.blue.css b/css/theme.blue.css index dc9f783e..e118f189 100644 --- a/css/theme.blue.css +++ b/css/theme.blue.css @@ -211,6 +211,7 @@ caption { /* ajax error row */ .tablesorter .tablesorter-errorRow td { + text-align: center; cursor: pointer; background-color: #e6bf99; } diff --git a/css/theme.bootstrap.css b/css/theme.bootstrap.css index dc5e956c..631f1680 100644 --- a/css/theme.bootstrap.css +++ b/css/theme.bootstrap.css @@ -133,6 +133,7 @@ /* ajax error row */ .tablesorter .tablesorter-errorRow td { + text-align: center; cursor: pointer; background-color: #e6bf99; } diff --git a/css/theme.bootstrap_2.css b/css/theme.bootstrap_2.css index 74e143d2..c9270143 100644 --- a/css/theme.bootstrap_2.css +++ b/css/theme.bootstrap_2.css @@ -134,6 +134,7 @@ caption { /* ajax error row */ .tablesorter .tablesorter-errorRow td { + text-align: center; cursor: pointer; background-color: #e6bf99; } diff --git a/css/theme.dark.css b/css/theme.dark.css index c104960b..e887a6f0 100644 --- a/css/theme.dark.css +++ b/css/theme.dark.css @@ -177,6 +177,7 @@ caption { /* ajax error row */ .tablesorter .tablesorter-errorRow td { + text-align: center; cursor: pointer; background-color: #e6bf99; } diff --git a/css/theme.default.css b/css/theme.default.css index cc59d203..0110931d 100644 --- a/css/theme.default.css +++ b/css/theme.default.css @@ -179,6 +179,7 @@ caption { /* ajax error row */ .tablesorter .tablesorter-errorRow td { + text-align: center; cursor: pointer; background-color: #e6bf99; } diff --git a/css/theme.dropbox.css b/css/theme.dropbox.css index 89da2d26..82c5eeec 100644 --- a/css/theme.dropbox.css +++ b/css/theme.dropbox.css @@ -202,6 +202,7 @@ caption { /* ajax error row */ .tablesorter .tablesorter-errorRow td { + text-align: center; cursor: pointer; background-color: #e6bf99; } diff --git a/css/theme.green.css b/css/theme.green.css index 0ccb973f..2a83b889 100644 --- a/css/theme.green.css +++ b/css/theme.green.css @@ -193,6 +193,7 @@ caption { /* ajax error row */ .tablesorter .tablesorter-errorRow td { + text-align: center; cursor: pointer; background-color: #e6bf99; } diff --git a/css/theme.grey.css b/css/theme.grey.css index 94771046..6ee1b3f6 100644 --- a/css/theme.grey.css +++ b/css/theme.grey.css @@ -235,6 +235,7 @@ caption { /* ajax error row */ .tablesorter .tablesorter-errorRow td { + text-align: center; cursor: pointer; background-color: #e6bf99; } diff --git a/css/theme.ice.css b/css/theme.ice.css index e1fb3f5a..dc71a664 100644 --- a/css/theme.ice.css +++ b/css/theme.ice.css @@ -191,6 +191,7 @@ caption { /* ajax error row */ .tablesorter .tablesorter-errorRow td { + text-align: center; cursor: pointer; background-color: #e6bf99; } diff --git a/css/theme.jui.css b/css/theme.jui.css index 20a9022d..24538e9a 100644 --- a/css/theme.jui.css +++ b/css/theme.jui.css @@ -144,6 +144,7 @@ /* ajax error row */ .tablesorter .tablesorter-errorRow td { + text-align: center; cursor: pointer; background-color: #e6bf99; } diff --git a/css/theme.less b/css/theme.less index 73f4b905..8a3c8d6a 100644 --- a/css/theme.less +++ b/css/theme.less @@ -320,6 +320,7 @@ /* ajax error row */ .tablesorter-errorRow td { + text-align: center; cursor: pointer; background-color: @errorBackground; } diff --git a/docs/index.html b/docs/index.html index d1357fe0..f6e611f4 100644 --- a/docs/index.html +++ b/docs/index.html @@ -2085,8 +2085,6 @@ $(function(){ Example - : true, // hide filter row when table is empty - Boolean @@ -4765,6 +4763,30 @@ $.tablesorter.isDigit( "(2,345.67)" ); + + + This function allows adding/removing a row to the thead, to display any errors v2.15 +

+ This function is ONLY included within the widget-pager.js and jquery.tablesorter.pager.js files; in version 3+, I plan to add it as a selectable option in a build.
+
+ Use it as follows: + 
$.tablesorter.showError( table, message );
+ + This function will add a table row to the thead, with a class name from either the pager plugin cssErrorRow option setting, or the pager widget pager_css.errorRow option (the default class name is `"tablesorter-errorRow"`; and styled within each theme css file).
+
+ When passing this function a message, there are three possibilities: +
    +
  1. Plain string - "table refuses to cooperate"
    2. +
  2. HTML row string - '<tr><td colspan="' + table.config.columns + '">yeah, instead of showing your data... I am taking a nap</td></tr>' (the table.config.columns variable contains the number of table columns; use as needed)
    3. +
  3. undefined - completely leave out a message parameter $.tablesorter.showError( table ); to remove all error rows from the table thead.
    4. + +
+ + + diff --git a/js/widgets/widget-pager.js b/js/widgets/widget-pager.js index 56166d85..cfe81b22 100644 --- a/js/widgets/widget-pager.js +++ b/js/widgets/widget-pager.js @@ -440,20 +440,14 @@ tsp = ts.pager = { result = wo.pager_ajaxProcessing(data, table) || [ 0, [] ], hl = $t.find('thead th').length; - $t.find('thead tr.' + wo.pager_css.errorRow).remove(); // Clean up any previous error. + // Clean up any previous error. + ts.showError(table); if ( exception ) { if (c.debug) { ts.log('Ajax Error', xhr, exception); } - $err = $('' + - '' + exception.message + ' (' + xhr.status + ')') - .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') ); + ts.showError(table, exception.message + ' (' + xhr.status + ')'); c.$tbodies.eq(0).empty(); } else { // process ajax object @@ -812,4 +806,30 @@ tsp = ts.pager = { }; +// see #486 +ts.showError = function(table, message){ + $(table).each(function(){ + var $row, + c = this.config, + errorRow = c.pager && c.pager.cssErrorRow || c.widgetOptions.pager_css && c.widgetOptions.pager_css.errorRow || 'tablesorter-errorRow'; + if (c) { + if (typeof message === 'undefined') { + c.$table.find('thead').find(c.selectorRemove).remove(); + } else { + $row = ( /tr\>/.test(message) ? $(message) : $('' + message + '') ) + .click(function(){ + $(this).remove(); + }) + // add error row to thead instead of tbody, or clicking on the header will result in a parser error + .appendTo( c.$table.find('thead:first') ) + .addClass( errorRow + ' ' + c.selectorRemove.replace(/^[.#]/, '') ) + .attr({ + role : 'alert', + 'aria-live' : 'assertive' + }); + } + } + }); +}; + })(jQuery);