Search code examples
javascriptjqueryhtmltablesorter

Embedding jquery.tablesorter.widgets.js in HTML

I am trying to embed the jquery.tablesorter.widgets.js script into an HTML file so that I can have a single HTML file for sharing sortable/filterable data with others. Specifically, I'm using the filtering widget.

Reference:https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js

Issue: Filtering is not working when embedding the above code in my HTML. The script appears to be executing, as I have the ability to enter text to filter, but the actual filtering is not executed. It seems the results are produced dynamically.

Embedding the jquery and base tablesorter script (for sorting) work as desired.

Is what I'm trying to accomplish possible?

Thanks

EDIT: Initializing code below

<script>
    $(function(){
  $('table').tablesorter({
 theme:'blue',
    widgets: [ 'zebra', 'resizable', 'stickyHeaders', 'filter' ],
    widgetOptions: {
      resizable: true,
      resizable_widths : [ '15%', '15%', '10px', ],
      resizable_targetLast : false,
      filter_cssFilter   : '',
      filter_childRows   : false,
      filter_hideFilters : false,
      filter_searchDelay : 300,
      filter_startsWith  : false,
      filter_external : '.search',
      filter_columnFilters: true,
      filter_placeholder: { search : 'Filter...' },
      filter_saveFilters : true,
      filter_reset: '.reset',
      }
      });
});
    </script>
Solution

  • The jquery.tablesorter.widgets.js file only contains a few often-used widgets. It does not contain the tablesorter core plugin, which is why the demo isn't working for you.

    If you want to include both, use the "combined" file instead: https://mottie.github.io/tablesorter/js/jquery.tablesorter.combined.js

    The "combined" file includes:

    • jquery.tablesorter.js:
      • tablesorter core.
      • zebra widget.
    • jquery.tablesorter.widgets.js:
      • storage widget
      • uitheme widget
      • columns widget
      • filter widget
      • stickyHeaders widget
      • resizable widget
      • saveSort widget

    If you don't want to include all those widgets, you can create a custom build using npm, grunt and a json file with all the settings. This build does not combine the core jquery.tablesorter.js file in with the custom widget file, so you'll have to combine them manually if you so desire.