jquery table sorting with plugin

Question

I am using a jquery plugin found at:

I was able to get it to work on a static table. But now I am trying to get it to work on a table that is filled from a database with ajax. I feel am putting this code:

    $(document).ready(function(){ $("#myTable").tablesorter(); } );

in the wrong spot. I just have it in Javascript tags at the top of the page. Since the table keeps getting refreshed I think I might need to call the above code again. Should it go in the ajax call or what?

jQuery dataTables sounds like a better fit for your needs: datatables.net — Rory McCrossan
– Rory McCrossan, Commented Feb 19, 2012 at 17:32

ShankarSangoli · Accepted Answer · 2012-02-19 17:41:40Z

3

Yes, you should execute it inside the ajax success handler where you create the dynamic table. It is because jQuery should be able to find the element on the page before applying the plugin on it. Since you are creating it dynamically it will not find it if you execute the code on document ready.

$.ajax(function(){
   ..
   success: function(){
        //Other code to create the dynamic table
        $("#myTable").tablesorter();
   }
   ..
});

Update:

If you are emptying the existing rows and just refreshing the same table with new rows(data) then you have to trigger update event on the table.

$("myTable").trigger("update");

edited Feb 19, 2012 at 17:41

answered Feb 19, 2012 at 17:32

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ten Digit Grid Over a year ago

that works after I populate the table, but if Ire-populate the table and then sort the old table pops back up

mgibsonbr Over a year ago

I think OP means that the table is static, the table data (tr, td) is what will change after the ajax calls. This code has already created the plugin, so it won't create it again.

ShankarSangoli Over a year ago

@searayman - I was thinking you are creating a new table. But if you are just refreshing the same table the please take a look at my edited answer.

Ten Digit Grid Over a year ago

Yes that is correct I am not creating a new table. I am clearing the rows under the header and re-filling. I tried adding the trigger after my code for adding the new rows.But when I test it and click a column to sort I get this error: Uncaught TypeError: Cannot read property '1' of undefined multisortjquery.tablesorter.js:600 $.extend.tablesorter.construct.each.$headers.click.mousedown.onselectstart

mgibsonbr · Accepted Answer · 2012-02-19 17:41:13Z

Check your plugin documentation, there's probably a way to re-sort it after the data has changed. This example might be what you're looking for. It creates the table sorter once, with empty data. When the data is inserted, it triggers an update using:

$("table").trigger("update");

This is the code you should use after each ajax call. Your original code should remain as it is (run it only once). The complete example would be something like:

$(document).ready(function(){ 
    $("#myTable").tablesorter();
    $.ajax(function(){
        ..
        success: function(){
            // Update your table data (remove and insert tr, tds etc)
            $("#myTable").trigger("update");
            // If your sorting conditions changed, use also:
            $("#myTable").trigger("sorton",[sortingConditions]);
        }
        ..
    });
});

(Fragments of code copied from yours and ShankarSangoli's answers)

Collectives™ on Stack Overflow

jquery table sorting with plugin

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related