Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery + TableSorter: Error when table is empty

jQuery's plugin TableSorter doesn't seem to handle a situation where it is attached to an empty table. Is there a neat way around this?

In my application the user can filter and search the data and eventually he or she will come up with a search criteria which doesn't return any values. In these situations it would be nice to "detach" the TableSorter or somehow fix it's code so that it works with an empty table.

I'm currently using the plugin like this:

    $("#transactionsTable")
    .tablesorter({ widthFixed: true, widgets: ['zebra'] })
    .tablesorterPager({ container: $("#pager"), positionFixed: false });

This works well, until the table is empty. Then I get the following error:

Line: 3
Error: '0.length' is null or not an object

Any ideas? Is it possible to change the script so that the tablesorter is only added to the table if it has rows?

like image 575
Mikael Koskinen Avatar asked May 02 '11 13:05

Mikael Koskinen


4 Answers

I think you can do it for your self.

    if ($("#transactionsTable").find("tr").size() > 1)
    {
          //> 1 for the case your table got a headline row
          $("#transactionsTable")
          .tablesorter({ widthFixed: true, widgets: ['zebra'] })
          .tablesorterPager({ container: $("#pager"), positionFixed: false });
    }

If your table got a tbody tag it is easier:

if ($("#transactionsTable").find("tbody").find("tr").size() > 0)

This way is maybe not the most professional one, but it should work under this circumstatances.

like image 198
Reporter Avatar answered Oct 19 '22 19:10

Reporter


The issue is related to the fact that several parts of the codebase use rows[0] to determine 1) total number of columns, 2) the parser type to use per column (eg "text" vs "digit").

Until this bug gets fixed, here is an easy workaround:

  1. Create a fake row in each table with contents like ("fake", 123, 123, 123, "fake"). Note how my fake contents match the "type" of the column to avoid confusing the column type detector.
    <tr class="fake_row"><td>fake</td><td>123</td></tr>
  2. Add CSS styling to make the fake row not render:
    tr.fake_row { 
        display: none; 
    } 

This seems to work effectively, allowing tablesorter to initialize and run error-free and has no impact on the rendered output.

like image 43
Dave Dopson Avatar answered Oct 19 '22 18:10

Dave Dopson


A more generic approach would be to override the tablesorter plugin itself to check for empty tables (until they fix the issue). See this post on overriding jquery core methods: http://www.bennadel.com/blog/1624-Ask-Ben-Overriding-Core-jQuery-Methods.htm

(function () {
  // Store a reference to the original tablesorter plugin.
  var originalTableSorter = jQuery.fn.tablesorter;

  // Define overriding method.
  jQuery.fn.tablesorter = function () {
    if (this.find('tbody tr').size() == 0) {
        if (typeof console != "undefined" && console.log) {
            console.log('skipping tablesorter initialization - table is empty');
        }

        return;
    }
    // Execute the original method.
    originalTableSorter.apply(this, arguments);
  }
})();
like image 31
Barry Pitman Avatar answered Oct 19 '22 18:10

Barry Pitman


This has been fixed in the lastest tablesorter (see issue 95).

like image 1
Brian Low Avatar answered Oct 19 '22 19:10

Brian Low