jquery tablesorter 的下拉过滤器是否可以区分同一单元格中的多个值？

Question

https://mottie.github.io/tablesorter/docs/example-widget-filter-custom.html 给出了几个示例 - 名字列按单元格内容过滤作为过滤选项，而城市和总计具有预定义选项作为过滤值。

有时，我们需要使用单元格内容作为筛选选项，因为我们不知道使用预定义选项的所有可能性，但这些单元格内容可能包含多个值。想象一个类别列，它列出了与该行关联的一个或多个类别。它们可以用逗号、换行符、br 标记等分隔。我们如何在列出每个单独类别的顶部添加下拉过滤器，而不必列出所有类别？如果我们使用自动下拉菜单，我们将单元格内容作为过滤器选项：例如"Loan, Insurance" 将是过滤器选项，而不是两个选项 - "Loan" 和 "Insurance"。如果它们被 break 标签分开，事情开始看起来更丑陋。

谢谢！

Answer 1

听起来您可以使用 filter_selectSource option 向该列中的 select 添加选项。

您可以使用 built-in getOptions function to obtain the current column values. If they are comma-separated, then you can join the array using commas and re-split the result (demo)

$(function() {
  $('table').tablesorter({
    theme: 'blue',
    widgets: ['zebra', 'filter'],
    widgetOptions: {
      filter_selectSource: function(table, column, onlyAvail) {
        var array = $.tablesorter.filter.getOptions(table, column, onlyAvail);
        return array.join(',').split(/\s*,\s*/);
      }
    }
  });
});

编辑：还要确保添加 "filter-match" class（也有 "filter-select"）以仅匹配 selected 选项。否则默认为完全匹配。

更新：如果使用 <br> 分隔数据，那么您需要添加自定义解析器以用逗号替换 <br>，然后您可以使用相同的代码 ( demo)

header 将需要另外两个 classes 来设置解析器并告诉过滤器小部件仅使用已解析的数据：

<th class="filter-select filter-match sorter-html filter-parsed">Animals</th>

JS

$(function() {

  $.tablesorter.addParser({
    id: 'html',
    is: function() {
      return false;
    },
    format: function(str, table, cell) {
      var c = table.config,
        html = cell.innerHTML;
      if (html) {
        // replace <br> with a comma
        html = html.replace(/\s*<br\s*\/?>\s*/g, ',')
        html = $.trim(c.ignoreCase ? html.toLocaleLowerCase() : html);
        html = c.sortLocaleCompare ? $.tablesorter.replaceAccents(html) : html;
      }
      return html;
    },
    type: 'text'
  });

  $('table').tablesorter({
    theme: 'blue',
    widgets: ['zebra', 'filter'],
    widgetOptions: {
      filter_selectSource: function(table, column, onlyAvail) {
        var array = $.tablesorter.filter.getOptions(table, column, onlyAvail);
        return array.join(',').split(/\s*,\s*/);
      }
    }
  });
});

jquery tablesorter 的下拉过滤器是否可以区分同一单元格中的多个值？

Is it possible for dropdown filter of jquery tablesorter to distinguish multiple values within the same cell?

tablesorter