使用表排序器筛选所选选项列表中的选定项目
Use tablesorter to filter selected items in options list chosen
我有在表格排序器的帮助下过滤的表格。每列的顶部都有一个搜索框。在其中一列中,我有一个基于所选 JavaScript 的选项列表。我希望能够根据选项列表中选择的内容过滤此列。我尝试使用文本提取函数触发所选项目周围的 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
}
});
});
好吧,
只是缺少一些东西来使这一切正常工作。
首先,这是一个更新的演示。
首先,选项的值应与文本匹配,或者您可以修改分析器以查找所选选项并获取其文本。
<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);
}
});
现在,确保设置了标头选项(或将"sorter-select"类添加到th
):
$("table").tablesorter({
theme: 'blue',
headers: {
1: {
sorter: 'select'
}
},
// ....
});
最后,将标头类名设置为仅查找该列的解析数据(filter-parsed
);添加data-value
以显示也可以设置初始过滤器。这也是可以添加sorter-select
类名而不是添加headers
选项的地方。
<th class="tags filter-parsed" data-value="sweden" data-placeholder="">Tags</th>
一切都完成了!
相关文章:
- 使用JavaScript在IE9中获取数据列表选项
- 使用Ajax或JavaScript选择下拉列表选项后,在同一页面上执行PHP脚本
- webforms:在javascript中动态添加下拉列表选项
- 为什么数据列表选项的id返回空值
- 动态下拉列表选项在添加多列后未填充
- 通过遍历JSON文件来填充数据列表选项
- 如何在从代码后面显示之前,在弹出窗口中选择预先填充的下拉列表选项
- 删除基于先前下拉列表选择的“选择下拉列表”选项
- 选择文档背景颜色的选择列表选项时,如何更改该颜色
- Jquery调用数据列表选项卡或输入
- Yii-如何获得下拉列表选项值与列表中的文本相同
- 如何创建一组从属选择列表,其中连续列表依赖于前面列表选项的选择
- 动态生成的下拉列表选项的挖空绑定
- 如何将输入映射到我的数据列表选项
- 尝试从 jQuery 帖子结果更新选择列表选项
- 如何阻止用户选择下拉列表选项而不“禁用”它
- 动态添加数据列表选项
- 使用JavaScript / jQuery向价格计算器添加下拉列表选项
- 使用javascript在第一个选择列表选项的基础上更改第二个选择列表
- 用省略号设置下拉列表选项