Question

https://mottie.github.io/tablesorter/docs/example-widget-filter-custom.html给出了一些示例 - First Name列按单元格内容过滤是过滤器选项，而City和Total有预定义选项作为过滤器值。

有时，我们需要使用单元格内容作为过滤器选项，因为我们不知道使用预定义选项的所有可能性，但这些单元格内容可能包含多个值。想象一下列类别，它列出了与行关联的一个或多个类别。它们可以用逗号，换行符，br标签等分隔。我们如何在顶部列出每个单独类别的下拉过滤器，而不必全部列出？如果我们使用自动下拉列表，我们将单元格内容作为过滤器选项：例如＆＃34;贷款，保险＆＃34;将是过滤选项而不是两个选项 - ＆＃34;贷款＆＃34;和＆＃34;保险＆＃34;。如果这些被破坏标签分开，事情开始变得更加丑陋。

谢谢！

Answer 1

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

您可以使用内置getOptions function获取当前列值。如果它们以逗号分隔，则可以使用逗号连接数组并重新分割结果（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*/);
      }
    }
  });
});

编辑：还要确保添加“过滤器匹配”类（“过滤器选择”类）以仅匹配所选选项。否则默认为精确匹配。

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

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

<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的下拉过滤器来区分同一单元格中的多个值？

1 个答案: