0

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?

HerrimanCoder
  • 6,835
  • 24
  • 78
  • 158
  • Code would be pretty handy to solve this. But you could 'simulate' a click to sort one of the columns on page load I guess if you're being hacky and/or using a 3rd party plugin to sort. – EGC Oct 04 '19 at 04:06
  • How to trigger a click on load with JQuery: https://stackoverflow.com/questions/2060019/how-to-trigger-click-on-page-load – EGC Oct 04 '19 at 04:07
  • 1
    EGC, click on load -- great tip. Thank you. – HerrimanCoder Oct 04 '19 at 15:06

1 Answers1

1

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");
});
Murali Nepalli
  • 1,588
  • 8
  • 17