jQuery + TableSorter: Error when table is empty
Asked Answered
M

5

7

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?

Montagnard answered 2/5, 2011 at 13:50 Comment(0)
C
10

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.

Chutney answered 2/5, 2011 at 13:57 Comment(2)
Btw, I found an option dealing with empty tables. The link tablesorter.com/docs/example-empty-table.html demonstrate it.Chutney
Its 2015 and the defect still exists. I used the tbody approach and it worked fine.Grandiloquent
M
3

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.

Meshwork answered 26/7, 2011 at 23:39 Comment(0)
G
2

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);
  }
})();
Genteel answered 20/2, 2012 at 13:21 Comment(0)
C
1

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

Curiel answered 4/9, 2012 at 20:27 Comment(1)
Actually I am using version 2.0.5b, which I believe is the latest greatest version, and it is still an issue.Clydesdale
C
0

Since overwriting plugins is always a bad idea, here's a different approach: If you just want to make sure your data table contains actual data rows, the jQuery selector :has() gets the job done, too.

$('table.tablesorter:has(tbody tr)').tablesorter({
    // your tablesorter config here
});
Clotilda answered 8/4, 2015 at 6:55 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.