How can I combine custom filter functions, custom selectSource and dynamic table population?

Question

I'm trying to combine the approach from this answer for adding a custom filter option for selecting empty cells with a table which is populated dynamically. Unfortunately I'm finding that after an update to the content of the table, the dropdown is not being repopulated with the updated options from the data.

I've created an example here which illustrates the problem. Initially the table contains just 3 rows and the filter dropdown for the first column correctly shows those options, along with the "(Empty)" option for filtering down to just the empty rows.

After clicking the button which adds a bit more data to the table, the filter dropdown for the "Custom" should now contain the additional options ("biscuit" and "sausages") along with those which existed before - like the "Default" column does. Unfortunately that doesn't happen.

$(function(){

  $("#tblsort").tablesorter({
    theme: "default",
    widgets: ["filter"],

    widgetOptions: {
      filter_functions: {
        1: { '(Empty)': function(e, n, f, i, $r, c) { return $.trim(n) === ''; } }
      },
      filter_selectSource: {
        1: function(table, column, onlyAvail) {
            var array = $.tablesorter.filter.getOptions(table, column, onlyAvail);
            array.unshift('(Empty)');
            return array;
        }
      }
    }
  });
  
  $("#addbtn").click(function(){
    // Pretend this is actually data loaded using AJAX or whatever
    $("#tblsort tbody").append("<tr><td>4</td><td>Biscuit</td><td>Biscuit</td></tr>");
    $("#tblsort tbody").append("<tr><td>5</td><td></td><td></td></tr>");
    $("#tblsort tbody").append("<tr><td>6</td><td>Sausages</td><td>Sausages</td></tr>");
    
    $("#tblsort").trigger("update", [true]);
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://mottie.github.io/tablesorter/dist/css/theme.default.min.css" rel="stylesheet"/>
<script src="https://mottie.github.io/tablesorter/dist/js/jquery.tablesorter.min.js"></script>
<script src="https://mottie.github.io/tablesorter/dist/js/jquery.tablesorter.widgets.min.js"></script>

<table id="tblsort">
<thead>
  <tr>
    <th class="filter-false">#</th>
    <th class="filter-select" data-placeholder="(All)">Custom</th>
    <th class="filter-select" data-placeholder="(All)">Default</th>
  <tr>
</thead>
<tbody>
  <tr><td>1</td><td>Foo</td><td>Foo</td></tr>
  <tr><td>2</td><td></td><td></td></tr>
  <tr><td>3</td><td>Bar</td><td>Bar</td></tr>
</tbody>
</table>

<button id="addbtn">Add more data</button>

This clearly seems to be some sort of behavioural conflict between the custom filtering and the call to update the table after the new data has been added. But I can't for the life of me work out how to solve it.

Answer 1

Probably not an ideal solution - I haven't looked at the code in a while, so I can't remember the optimal way to update the selects - but this method works:

$("#addbtn").click(function(){
  // Pretend this is actually data loaded using AJAX or whatever
  $("#tblsort tbody").append("<tr><td>4</td><td>Biscuit</td><td>Biscuit</td></tr>");
  $("#tblsort tbody").append("<tr><td>5</td><td></td><td></td></tr>");
  $("#tblsort tbody").append("<tr><td>6</td><td>Sausages</td><td>Sausages</td></tr>");

  $("#tblsort").trigger("update", [true]);
  $.tablesorter.filter.buildSelect( $("#tblsort"), 1, '', true, true);
});

I added a buildSelect function call to force a rebuild.