Mottie Tablesorter外部筛选按钮：实现双数据集加载需求

需求说明 #

点击Alabama、Alaska等州按钮时，同时筛选出对应州和Base的内容，实现单按钮触发两个data-filter-text的筛选效果。

修改方案 #

1. 调整按钮数据属性 #

给州按钮新增自定义属性，标记需要同时筛选的Base内容：

<button type="button" data-filter-column="0" data-filter-text="Alabama" data-filter-additional="Base" class="changebnd">Alabama</button>
<button type="button" data-filter-column="0" data-filter-text="Alaska" data-filter-additional="Base" class="changebnd">Alaska</button>
<button type="button" data-filter-column="0" data-filter-text="Arizona" data-filter-additional="Base" class="changebnd">Arizona</button>
<button type="button" data-filter-column="0" data-filter-text="Arkansas" data-filter-additional="Base" class="changebnd">Arkansas</button>
<button type="button" data-filter-column="0" data-filter-text="Base" class="changebnd"> Base </button>

2. 修改点击事件脚本 #

利用Tablesorter的多值筛选语法（竖线|分隔），合并主筛选值和额外筛选值：

$('button[data-filter-column]').click(function() {
  var filters = [],
      config = $table[0].config,
      $t = $(this),
      col = $t.data('filter-column'), 
      txt = $t.data('filter-text') || $t.text(),
      additionalTxt = $t.data('filter-additional');

  // 合并多筛选值
  if (additionalTxt) {
    txt = `${txt}|${additionalTxt}`;
  }

  filters[col === "all" ? config.columns : col] = txt;
  $.tablesorter.setFilters( $table, filters );
  return false;           
});

原理说明 #

Mottie Tablesorter支持用竖线|分隔多个筛选值，此时会匹配任意一个符合条件的内容。点击州按钮时，筛选条件变为「州名 OR Base」，从而同时展示两类数据。

参考文档核心内容（翻译） #

自定义筛选搜索功能可扩展Tablesorter的筛选逻辑，支持自定义匹配规则、多值筛选、动态修改筛选条件等操作，通过setFilters方法可直接设置表格筛选值，结合自定义数据属性能灵活实现复杂的外部筛选需求。

内容的提问来源于stack exchange，提问作者Pirelli