Tablesorter 2.28.7 - Cannot read property 'text' of undefined when using select-filter

Question

I'm using the fork of tablesorter v. 2.28.7 and I'm trying to add a select filter. Everything worked as intended before using the select filter, so with normal text filtering...

This is my table ahead

<table id="stopsTable">
                <thead>
                    <tr>

                        <th><spring:message code="id" /></th>
                        <th><spring:message code="stop.user" /></th>
                        <th data-placeholder="---"><spring:message code="stop.park" /></th>
                        <th><spring:message code="stop.from" /></th>
                        <th><spring:message code="stop.to" /></th>
                        <th><spring:message code="stop.price" /></th>

                        <th><spring:message code="stop.status" /></th>
                        <th class="filter-false"><span class="pull-right"><spring:message
                                    code="actions" /></span></th>
                    </tr>
                </thead>

and then the js

$(document).ready(function() {


$("#stopsTable")

.tablesorter({
    headers: {
        7: {sorter: false},
        3: {sorter: 'customDate'},
        4: {sorter: 'customDate'}
    },
    theme: "bootstrap",
    widthFixed: true,
    headerTemplate : '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon!
    widgets : [ "uitheme", "filter", "columns", "zebra", "pager" ],
    widgetOptions : {
      zebra : ["even", "odd"],
      columns: [ "primary", "secondary", "tertiary" ],
      filter_reset : ".reset",
      filter_cssFilter: "form-control",
      pager_output: '{startRow:input}  {endRow} / {totalRows} row',
      pager_updateArrows: true,
      pager_startPage: 0,
      pager_size: 10,
      pager_removeRows: false,
      filter_ignoreCase  : true,
      filter_searchDelay : 300,
      filter_functions : {
          2 : true,
          },
    },

  })

});

$.tablesorter.addParser({ 
    id: "customDate",
    is: function(s) {
        //return false;
        //use the above line if you don't want table sorter to auto detected this parser                        
        //21/04/2010 03:54 is the used date/time format 
        return /\d{1,2}\/\d{1,2}\/\d{1,4} \d{1,2}:\d{1,2}/.test(s);
    },
    format: function(s) {
        s = s.replace(/\-/g," ");
        s = s.replace(/:/g," ");
        s = s.replace(/\./g," ");
        s = s.replace(/\//g," ");
        s = s.split(" ");                       
        return $.tablesorter.formatFloat(new Date(s[2], s[1]-1, s[0], s[3], s[4]).getTime());                                         
    },
    type: "numeric"} );

I also tried to add the "filter-select" class to the but i'm getting this exception

Uncaught TypeError: Cannot read property 'text' of undefined

at this point:

jquery.tablesorter.widgets.js:2003

Answer 1

In the demo that was shared, the HTML is not valid... between the </thead> and <tbody> is an extra <tr>

</thead>

 <tr>

<tbody>

This is causing the javascript error. If you remove that <tr>, the demo works without any issues - https://jsfiddle.net/bbxxomhx/401/