带自定义匹配功能的tablesorter选择框 [英] tablesorter select box with a custom match function
问题描述
我有一个带有列的HTML表格，其中存在无序的字符串列表。我正在使用tablesorter和过滤器插件来与列表进行交互。我希望列的所有单元格中的每个字符串都出现在表头的选择过滤器中。如果用户选择一个选项，则应该显示这些行，该字符串出现在特定列单元格的无序列表中。
让我举个例子。我有以下列表：
< table>
< thead>
< tr>
< th>名称< / th>
行业< / th>
< / tr>
< / thead>
< tbody>
< tr>
< td> Carl< / td>
< td>
< ul>
< li> Builder< / li>
< li>教授< / li>
< / ul>
< / td>
< / tr>
< tr>
< td> Lisa< / td>
< td>
< ul>
< li>程序员< / li>
< li>教授< / li>
< / ul>
< / td>
< / tr>
< / tbody>
< / table>
在表头中，我希望tablesorter显示三个职业的选择框。如果选择 professor ，则应显示两行。如果选择程序员，则只会出现Lisa。如何达到这个目标？
filter_functions 小部件选项，如下所示（ $（function（）{$ abkNM / 3072 /rel =nofollow> demo ）： b
$（'table'）。tablesorter（{
主题：'blue'，
部件：['filter']，
widgetOptions：{
filter_functions：{
1：{
Programmer：function（e，n）{return /programmer/.test(n）;}，
Professor：function（e，n ）{return /professor/.test（n）;}，
Builder：function（e，n）{return /builder/.test(n);}
}
}
}
}）;
}）;
更新：如果您不想硬编码因为这些职业有所不同，那么您可以使用 filter_selectSource 选项来抓取所有列文本，从列表中提取出每个项目，然后将其作为数组返回（
< th class =filter-select filter-match>专业< / th>
脚本
$（function（）{
$（'table'）。tablesorter（{
theme：'blue'，
widgets：['filter']，
widgetOptions：{
filter_selectSource：function（table，column，onlyAvail）{
//获取表格列的所有表格单元格内容的数组
var arry = []，
array = $ .tablesorter.filter.getOptions（table，column，onlyAvail）;
//在遇到多个职业时分割内容
$ .each（array，function（i，n） {
//寻找回车;分成两个单独的职业
if（/\\\
/.test(n））{
n = n.split（/ \ n /） ;
}
arry.push（n）;
}）;
// flatten数组
返回$ .ma p（arry，function（n）{return n; }）;
}
}
}）;
}）;
I have an HTML table with a column, in which an unordered list of strings is present. I am using tablesorter with the filter plugin to interact with the list. I want each string in all cells of the column to be present in a select filter in the header of the table. If the user selects an option, those rows should be displayed, where this string appears in the unordered list of the particular column cell.
Let me give you an example. I have the following list:
<table>
<thead>
<tr>
<th>name</th>
<th>profession</th>
</tr>
</thead>
<tbody>
<tr>
<td>Carl</td>
<td>
<ul>
<li>Builder</li>
<li>Professor</li>
</ul>
</td>
</tr>
<tr>
<td>Lisa</td>
<td>
<ul>
<li>Programmer</li>
<li>Professor</li>
</ul>
</td>
</tr>
</tbody>
</table>
In the table header, I want tablesorter to display a select box with the three professions. If, say, professor is selected, both rows should be shown. If programmer is selected, only Lisa would appear. How would I reach that?
Use the filter_functions widget option as follows (demo):
$(function () {
$('table').tablesorter({
theme: 'blue',
widgets: ['filter'],
widgetOptions: {
filter_functions: {
1: {
"Programmer": function (e, n) { return /programmer/.test(n); },
"Professor" : function (e, n) { return /professor/.test(n); },
"Builder" : function (e, n) { return /builder/.test(n); }
}
}
}
});
});
Update: If you don't want to hardcode because the professions vary, then you can use the filter_selectSource option to grab all of the column text, extract out each item from the list then return it as an array (demo):
HTML (make sure to include these class names)
<th class="filter-select filter-match">profession</th>
Script
$(function () {
$('table').tablesorter({
theme: 'blue',
widgets: ['filter'],
widgetOptions: {
filter_selectSource: function (table, column, onlyAvail) {
// get an array of all table cell contents for a table column
var arry = [],
array = $.tablesorter.filter.getOptions(table, column, onlyAvail);
// split content if multiple professions are encountered
$.each( array, function(i, n){
// look for carriage returns; split into two separate professions
if (/\n/.test(n)) {
n = n.split(/\n/);
}
arry.push(n);
});
// flatten array
return $.map(arry, function(n){ return n; });
}
}
});
});
这篇关于带自定义匹配功能的tablesorter选择框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
