我有一个在 Tablesorter 的帮助下过滤的表。每列顶部都有一个搜索框。在其中一列中，我有一个基于所选 JavaScript 的选项列表。我希望能够根据选项列表中选择的内容来过滤此列。我尝试使用 textExtraction 函数触发所选项目周围的 span 标签，但我无法让它工作。欢迎提出任何建议。
我在这个JSFiddle中有一个设置
<body>
<table class="tablesorter">
<thead>
<tr>
<th class="title" data-placeholder="">Title</th>
<th class="tags" data-placeholder="">Tags</th>
<th class="date" data-placeholder="">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fish</td>
<td>
<select data-placeholder="Choose Tags" class="chosen-select" multiple>
<option value=""></option>
<option value="Option1">Sweden</option>
<option value="Option2">Norway</option>
<option value="Option3">Finland</option>
</select>
</td>
<td>2012-12-03</td>
</tr>
<tr>
<td>Boat</td>
<td>
<select data-placeholder="Choose Tags" class="chosen-select" multiple>
<option value=""></option>
<option value="Option1">Sweden</option>
<option value="Option2">Norway</option>
<option value="Option3">Finland</option>
</select>
</td>
<td>2012-12-15</td>
</tr>
</tbody>
</table>
$(document).ready(function () {
$("table").tablesorter({
theme: 'blue',
textExtraction: {
1: function (node, table, cellIndex) {
return $(node).find("span").text();
}
},
widthFixed: true,
widgets: ["zebra", "filter"],
widgetOptions: {
filter_childRows: false,
filter_columnFilters: true,
filter_cssFilter: 'tablesorter-filter',
filter_functions: null,
filter_hideFilters: false,
filter_ignoreCase: true,
filter_reset: 'button.reset',
filter_searchDelay: 300,
filter_startsWith: false,
filter_useParsedData: false
}
});
});
最佳答案
好吧，只是缺少一些东西才能使其正常工作。
首先，这是一个updated demo .
首先，选项的值应与文本匹配，或者您可以修改解析器以查找所选选项并获取其文本。
<select data-placeholder="Choose Tags" class="chosen-select" multiple>
<option value=""></option>
<option value="Sweden">Sweden</option>
<option value="Norway">Norway</option>
<option value="Finland">Finland</option>
</select>
接下来，包含一个解析器来获取所选选项并更新表缓存:
$.tablesorter.addParser({
id: "select",
is: function () {
return false;
},
format: function (s, table, cell) {
// since the select can get multiple results in an array,
// we combine all the values using join(',')
return ($(cell).find('select').val() || []).join(',') || s;
},
type: "text"
});
// this flag prevents the updateCell event from being spammed
// it happens when you modify input text and hit enter
var alreadyUpdating = false;
$('table').find('tbody').on('change', 'select', function (e) {
if (!alreadyUpdating) {
var $tar = $(e.target),
$table = $tar.closest('table');
alreadyUpdating = true;
$table.trigger('updateCell', [$tar.closest('td')]);
setTimeout(function () {
alreadyUpdating = false;
}, 10);
}
});
现在，确保设置了 header 选项(或将“sorter-select”类添加到第 th 中):
$("table").tablesorter({
theme: 'blue',
headers: {
1: {
sorter: 'select'
}
},
// ....
});
最后，将 header 类名设置为仅查找该列的已解析数据(filter-parsed)；添加了 data-value 以表明还可以设置初始过滤器。这也是可以添加 sorter-select 类名而不是添加 headers 选项的位置。
<th class="tags filter-parsed" data-value="sweden" data-placeholder="">Tags</th>
一切都完成了!
关于javascript - 使用 tablesorter 过滤所选选项列表中的选定项目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19413025/