Search code examples
jquerycsstablesorter

TableSorter doesn't get styled until a column is clicked

I am using the TableSorter jquery plugin. Functionally it works fine. I don't load my tablesorter table statically when the page loads, but rather in an ajax call, as soon as the static page load finishes. The reason I do this is because users can make changes that affect the data in this table, so sometimes I need the js in the page to re-pull and reload it via ajax from the server.

Here is the problem: After the tablesorter table is built, the styles aren't applied. It's as though no styles exist on it. However, as soon as I click any of the columns to sort, suddenly all the styles get applied and appear as expected.

You can see this behavior in action by clicking here. Click the Dependencies tab to see my table. At least in Chrome, you should see no styles. Then click any column header and watch the styles be applied.

Before styles are applied: enter image description here

After clicking a column header, and styles suddenly get applied: enter image description here

Question: How can I force the styles to apply when initially loaded, without having to wait for a column header to be clicked?

Solution

  • I looked into your html code, When user clicks on the "Dependencies tab" run the following line, then you can see the styles being applied. I verified on chrome "console".

    $('table').trigger('sortReset');

    OR add the below piece of code on pageload, it triggers sortReset when the dependenices tab is clicked, Just once, then the handler is removed.

    $("#tabDependencies").parent().click(function() {  
  $('table').trigger('sortReset');
  $(this).off("click");
});