How to trigger a JavaScript function on load?

I’ve got a basic page that displays a table. I’m choosing Tablesorter for my table (https://mottie.github.io/tablesorter/docs/index.html). This is done by referencing the tablesorter theme in the className of the Table html component, like so:

myTable = html.Table(myTableHeader + [myTableBody], 
                        className='tablesorter-blue')

^Obviously you also need to have referenced the blue css as an external css script plus the jQuery and tablesorter scripts which you can either download or reference externally from the CDN (https://cdnjs.com/libraries/jquery.tablesorter / https://mottie.github.io/tablesorter/docs/index.html#Download).

So the above works if I set the className to tablesorter-blue matching the definition in the css file (https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/css/theme.blue.css).

However, what this doesn’t do is enable two tablesorter widgets, in particular zebra and filter. The first is a style preference, the second allows text input filtering on column values. Applying the widgets is done via a JavaScript call like so:

$(function() {
  // call the tablesorter plugin
  $("table").tablesorter({
    theme: 'blue',
    widgets : [ 'zebra', 'filter' ]
  });
});

As you can see this achieves two things: first it sets the theme to blue, and second enables the widgets. So what I should be able to do is just set the className to tablesorter per the documentation, then call the function separately. However, I cannot get this to trigger in Dash, even if I add this to a separate js under assets. I’ve also experimented with the including a html.Script() as well, but no luck. I keep having to go into Chrome developer console to do it manually.

How can I do this through Dash?

5 posts - 2 participants

Read full topic