jQuery TableSorter Plugin error on init : cannot read property '0' of undefined

Question

i wanna sort my table with jQuery Plugin TableSorter . So i get this table :

<table id="stats" class="zebra-striped">
 <thead>
  <tr>
   <th>Date</th>
   <th>Annonce</th>
   <th>Support</th>
   <th>Nb Assoc.</th>
   <th>Nb Transfo.</th>
   <th>Cout</th>
  </tr>
 </thead>
 <tbody>
 </tbody>
</table>

So as you can see my table is empty, just had header. So i init tablesorter with empty cell with :

$("table#stats").tablesorter({ sortList: [[0,0]]});

and immediatly i get this error :

jquery.tablesorter.min.js:4 Uncaught TypeError: Cannot read property '0' of undefined

FYI , there's my js loaded :

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.5.1.min.js">\x3C/script>')</script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/jquery.tablesorter.min.js"></script>

Any idea why i get this and how i can make the plugin work again ?

Thx

November

sounds like your tablesorter function isn't loaded in correctly, can you check the javascript files that get loaded in your page? – Teshatesla

@Teshatesla : Just checked. Seems to be fine. I edit the post to include it ;) – November

and if you put in an empty <tr> with empty <td>'s in there? – Teshatesla

According to the plugin documentation, i can init it with an empty table :( – November

in the documentation you include, they first fill up the table with data and then call that sortList method. – Teshatesla

nop they init the sorting plugin, filling up with data and ask plugin to be aware of new content after. – November

the way I see it, they init tablesorter ($("table").tablesorter(); ) , add the new data ($("table").trigger("update"); ) and then add the sorting ($("table").trigger("sorton",[sorting]); ) – Teshatesla

Hey @Teshatesla i just double check and you're right. Init with empty table is fine now but when i add the data, after triggering update (which work perfectly) i want to sort again and i got a new error : Uncaught TypeError: Cannot read property 'length' of undefined BTW may you want to formulate an answer which i can mark as solve my problem ? – November

Answer 1

You need to have data in your table before you can call the sortList method on it. This is because you apply an indexing in this method that will not find any records if there is no data present and that will throw the "Cannot read property '0' of undefined" error.

Teshatesla

Answer 2

It's not good use tablesorter when there is a empty table, so you can use this condition:

if ($("table#stats tbody tr").length > 0)
   $(this).tablesorter({ sortList: [[0,0]]});

Searcy

Answer 3

You don't need to have data in your table. Just initilize your table that way:

$("table#stats").tablesorter();

Then, after you have inserted the data in the table, you must tell to plugin that the table was updated and sort it:

$("table#stats").trigger("update");
var sorting = [[0,0]];
$("table#stats").trigger("sorton",[sorting]);

Copilot

Answer 4

I couldn't get any of this to work so I set a timeout on the initialize for tablesorter...

setTimeout(function() {$('table').tablesorter();}, 10000);

Cicerone

That's the only one out of dozens post in stackoverflow that did the trick for me ;) Thanks! – Antithesis

Answer 5

I've noticed that this happens with the latest version (2.0.5b, I think) found at http://tablesorter.com/, but it didn't happen in earlier versions (I have a copy of 2.0.3, and it worked in that). However, there is a forked version at https://github.com/Mottie/tablesorter, which is much better maintained, and doesn't have this error.

Arrive

Answer 6

I got an error "cannot read property 'format' of undefined". In my case the error occurred due to different number of 'td's in 'tbody' than in 'thead'

Florio