我已经有一个表格排序器几乎按照我想要的方式运行,只是还有一件事我不知道该怎么做。
现在,我有一个表格,您可以在其中按列搜索,并且可以通过按在列的搜索字段中输入值的按钮来快速过滤表格。
问题是,我希望人们能够选中多个复选框,以便根据此输入过滤表格。这些复选框是“分组”的,每个组应在其相应的列上进行过滤(例如,检查不同的月份应过滤月份列)。应该可以选中多个组中的多个复选框。例如,您可以检查“荷兰”、“比利时”,它们会在国家/地区列中进行过滤,并检查“八月”和“九月”,这会将过滤器添加到月份列中。您可以查看我的示例网站以了解我的意思。
复选框不应像现在的按钮那样在搜索字段中输入其值。
最后,我想添加一个按钮,用于清除所有搜索查询并因此重置表格(现在已经这样做了),但它也应该取消选中所有复选框。
我不是程序员,但凭借一些基础知识、大量研究和反复试验,我成功地让表排序器运行起来。我真的希望有一种方法可以使用复选框。
示例页面:http://www.yellowtipi.nl/tablesortertest/index.html (这是一个无样式的版本,以使代码清晰,最终版本将有 100 多行)。
如果有任何不清楚的地方请告诉我!
最佳答案
您需要做的就是注释掉或删除一行 - filters.val('');
:
这是代码,a demo (我还向每组添加了清除按钮,以允许清除过滤器列)
$('button.search').click(function() {
var filters = $('table').find('input.tablesorter-filter'),
col = $(this).data('filter-column'),
txt = $(this).data('filter-text');
// filters.val('');
filters.eq(col).val(txt).trigger('search', false);
});
<小时/>
此外,此代码需要我的 fork of tablesorter为了工作。以下是其他人可能感兴趣的代码:
HTML 示例:
<button class="search" data-filter-column="4" data-filter-text="Netherlands">Netherlands</button>
<button class="search" data-filter-column="4" data-filter-text="Belgium">Belgium</button>
<button class="search" data-filter-column="4" data-filter-text="Germany">Germany</button>
<button class="search" data-filter-column="4" data-filter-text="">Clear</button>
<table id="festivaloverzichttable" class="tablesorter">
<thead>
<tr>
<th width="17%" data-placeholder="Search...">Event</th>
<th width="18%" data-placeholder="Search...">Date</th>
<th width="9%" data-placeholder="Search...">Duration</th>
<th width="12%" data-placeholder="Search...">Place</th>
<th width="10%" data-placeholder="Search...">Country</th>
<th data-placeholder="Zoek...">Genre(s)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Event 1</td>
<td data-date="06-02">TBA</td>
<td>2</td>
<td>Oisterwijk</td>
<td>Netherlands</td>
<td>Hardstyle</td>
</tr>
<tr>
<td>Event 2</td>
<td data-date="10-11">11 October t/m 13 October</td>
<td>3</td>
<td>Volkel</td>
<td>Netherlands</td>
<td>Pop, Rock, Urban, Electronic</td>
</tr>
<tr>
<td>Event 3</td>
<td data-date="06-02">TBA</td>
<td>1</td>
<td>Amsterdam</td>
<td>Netherlands</td>
<td>Electronic</td>
</tr>
<tr>
<td>Event 4</td>
<td data-date="09-01">TBA</td>
<td>1</td>
<td>Utrecht</td>
<td>Netherlands</td>
<td>Electronic, Urban</td>
</tr>
<tr>
<td>Event 5</td>
<td data-date="07-06">6 July - 7 July</td>
<td>2</td>
<td>Beek en Donk</td>
<td>Netherlands</td>
<td>Electronic, Hardstyle</td>
</tr>
...
</tbody>
</table>
Javascript(我删除了数据解析器代码和默认过滤器小部件选项以避免混淆)
$("#festivaloverzichttable").tablesorter({
sortList: [[0, 0]],
widgets: ['zebra', 'filter', 'saveSort'],
widgetOptions: {
filter_reset: 'button.reset'
}
});
$('button.search').click(function() {
var filters = $('table').find('input.tablesorter-filter'),
col = $(this).data('filter-column'),
txt = $(this).data('filter-text');
filters.eq(col).val(txt).trigger('search', false);
});
<小时/>
更新:要允许多个选项,请将按钮搜索更改为以下内容 ( updated demo )
$('button.search').click(function() {
var filters = $('table').find('input.tablesorter-filter'),
col = $(this).data('filter-column'),
txt = $(this).data('filter-text'),
cur = filters.eq(col).val(),
mult, i;
if (cur && txt !== '') {
mult = cur.split('|');
i = $.inArray(txt, mult);
if (i < 0) {
mult.push(txt);
} else {
mult.splice(i,1);
}
txt = mult.join('|');
}
filters.eq(col).val(txt).trigger('search', false);
});
关于jquery - 表排序器排序;多个复选框、多列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13440772/