Tablesorter filter select

All options included, as well as the uitheme widget

by shorif2000

HTML

<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.blue.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.dark.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.default.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.dropbox.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.green.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.grey.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.ice.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.black-ice.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.bootstrap.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/addons/pager/jquery.tablesorter.pager.css">
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script src="https://mottie.github.io/tablesorter/addons/pager/jquery.tablesorter.pager.js"></script>
<h1 id="errorMessage">(<span id="countresponse">0</span>) HEADING</h1>
            <div class="pager"></div>
            <div style="position: relative">
            <form id="frmresponsesnow" name="frmresponsesnow">
                <input type="hidden" name="state[]" value="1"/>
                <input type="hidden" name="state[]" value="10"/>
                <input type="hidden" name="offset" value="0"/>
                <input type="hidden" name="x-total-count" value="0"/>
            <table class="formatted fullwidth blue" id="responsesnow">
                <colgroup>
                    <col style="width:15%;" />
                    <col style="width:10%;" />
                    <col style="width:10%;" />
                    <col style="width:20%;" />
                    <col...

CSS

/* This class is added to the span wrapping the
   header text using the "onRenderHeader" option */

.roundedCorners {
  border: #777 1px solid;
  padding: 0 10px;
  border-radius: 1em;
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
}

JavaScript

/* Documentation for this tablesorter FORK can be found at
 * http://mottie.github.io/tablesorter/docs/
 */
$(function() {

  var t, start,
    vis = false;
  const tableresponsesnow = $("#responsesnow").tablesorter({
      showProcessing: true,
      // hidden filter input/selects will resize the columns, so try to minimize the change
      widthFixed: true,
      // initialize zebra striping and filter widgets
      widgets: ["saveSort", "zebra", "filter"],
      ignoreCase: true,
      initialized: function(table) {
        var tableresponsesnowSolutionsOptions = $.tablesorter.filter.getOptionSource($(table), 0, true);
        console.log(tableresponsesnowSolutionsOptions);
        // build options
        var opts = '';
        for (index = 0; index < tableresponsesnowSolutionsOptions.length; index++) {
          //opts += '<option value="' + array[ index ].parsed + '">' + array[ index ].text + '</option>';
        }
        //$.tablesorter.setFilters( tableresponsesnow, [ '', '', '', '', '', '2?%' ], false );
        console.log($(table).children('thead').children('tr.tablesorter-filter-row').children('td:first').children('select'))
        $(table).children('thead').children('tr.tablesorter-filter-row').children('td:first').children('select').html(opts);
      },
      widgetOptions: {
        filter_columnFilters: true,
        // jQuery selector string of an element used to reset the filters
        filter_reset: '#filter_reset',
        // change the default striping class names
        zebra: ["normal-row", "alt-row"],
        filter_functions: {
          //0: getOptions(this),

          0: true,
          //0: getOptions(this),
          5: true,
          6: true
        },
        filter_excludeFilter: {
          // zero-based column index
          7: 'range'
        },
        filter_selectSourceSeparator: '|',
        /*filter_formatter : {
                    0 : function($cell, indx) {
                        console.log($cell)
              ...