How to make multiple HTML tables sortable?

Question

I am currently using an open-source javascript table sorter: http://mottie.github.io/tablesorter/docs/

The problem I have is that I dynamically add tables to my page in reaction to the user pressing a button. Only the most recently added table becomes sortable and the previous tables are not sortable anymore after I add the new table. Currently, I have this code at the end of my table creation:

 //Make table sortable
        $(document).ready(function () {
            $("#" + thisTable.ID).tablesorter();
        });

I don't understand why the old tables lose their sortability if they're not being reloaded. I am only appending a new table with a different ID under the previously added table.

Software Engineer · Accepted Answer · 2014-06-19 21:10:39Z

3

You can change your selector to $('table'), and this will add the sorter to all tables. Your current code will only run on page load though, so you'll have to execute the $('table').tablesorter(); line every time you dynamically add a new table (in your button's click handler).

It would be better though if you added a class, such as sortedTable to every table, and made your selector $('.sortedTable'), rather than simply $('table'), because you may at some time want a table that isn't sorted and the first version will always sort all tables. The second version will only sort those tables that you explicitly mark as sortable.

answered Jun 19, 2014 at 21:10

Software Engineer

16.3k8 gold badges87 silver badges109 bronze badges

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

Collectives™ on Stack Overflow

How to make multiple HTML tables sortable?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related