如何组合自定义过滤器功能、自定义 selectSource 和动态 table 人口？

Question

我正在尝试结合中的方法来添加用于选择空单元格的自定义过滤器选项以及动态填充的 table。不幸的是，我发现在 table 的内容更新后，下拉列表没有重新填充来自数据的更新选项。

我在这里创建了一个示例来说明问题。最初 table 仅包含 3 行，第一列的过滤器下拉列表正确显示了这些选项，以及用于过滤到空行的“（空）”选项。

单击向 table 添加更多数据的按钮后，“自定义”的过滤器下拉列表现在应该包含其他选项（“饼干”和“香肠”）以及那些之前存在 - 就像“默认”列一样。不幸的是，这并没有发生。

$(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>

这显然似乎是自定义筛选与添加新数据后更新 table 的调用之间的某种行为冲突。但是我一辈子都想不出如何解决它。

Answer 1

可能不是一个理想的解决方案 - 我有一段时间没有查看代码，所以我不记得更新选择的最佳方式 - 但这个方法有效：

$("#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);
});

我添加了一个 buildSelect 函数调用来强制重建。

如何组合自定义过滤器功能、自定义 selectSource 和动态 table 人口？

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

filter

tablesorter