Tablesorter 子行始终显示每个搜索过滤器
Tablesorter Child Row always shows for every search filter
电子邮件行是父级。地址是子行。
为每个搜索过滤器关键字显示子行。
我的目标是简单地过滤 childRows 并仅显示匹配的 childRows 与 Parent Rows 作为输出。
谁能帮我找出问题所在。
HTML代码:
<div class="form-control divCheckBox">
<div class="tableFilterLink" data-table="selectedTableFilter">
<i class="icon-filter"></i>
<a>Show Filters</a>
</div>
<table id="selectedTableFilter" class="table table-bordered table-striped">
<thead>
<tr>
<th>Selected Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>dffbach@yahoo.com</td>
</tr>
<tr>
<td>kjjdoe@hotmail.com</td>
</tr>
<tr class="tablesorter-childRow">
<td colspan="4">
<div class="bold">Shipping Address</div>
<div>2255 254th Avenue Se<br>Albany, Oregon 97321</div>
</td>
</tr>
<tr>
<td>pootconway@earthlink.net</td>
</tr>
<tr class="tablesorter-childRow">
<td colspan="4">
<div class="bold">Shipping Address</div>
<div>99700 Bell Road<br>Auburn, California 95603</div>
</td>
</tr>
</tbody>
</table>
</div>
Javascript:
$("#selectedTableFilter").tablesorter({
debug: true,
headerTemplate: "{content}<b></b>",
cssChildRow : "tablesorter-childRow",
widgets: ["zebra","filter"],
sortInitialOrder: "asc",
sortList: [[0,0]],
sortRestart: true,
widgetOptions: {
filter_hideFilters: true,
zebra : ['normal-row', 'alt-row' ],
filter_childRows: true,
filter_cssFilter : 'tablesorter-filter',
filter_startsWith: false,
filter_ignoreCase : true,
filter_childWithSibs: false,
},
widthFixed: true
});
感谢@Mottie
如果您使用的是 tablesorter 的自定义主题,请确保包含以下定义:
.tablesorter-filter {
display: none;
}
电子邮件行是父级。地址是子行。
为每个搜索过滤器关键字显示子行。
我的目标是简单地过滤 childRows 并仅显示匹配的 childRows 与 Parent Rows 作为输出。
谁能帮我找出问题所在。
HTML代码:
<div class="form-control divCheckBox">
<div class="tableFilterLink" data-table="selectedTableFilter">
<i class="icon-filter"></i>
<a>Show Filters</a>
</div>
<table id="selectedTableFilter" class="table table-bordered table-striped">
<thead>
<tr>
<th>Selected Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>dffbach@yahoo.com</td>
</tr>
<tr>
<td>kjjdoe@hotmail.com</td>
</tr>
<tr class="tablesorter-childRow">
<td colspan="4">
<div class="bold">Shipping Address</div>
<div>2255 254th Avenue Se<br>Albany, Oregon 97321</div>
</td>
</tr>
<tr>
<td>pootconway@earthlink.net</td>
</tr>
<tr class="tablesorter-childRow">
<td colspan="4">
<div class="bold">Shipping Address</div>
<div>99700 Bell Road<br>Auburn, California 95603</div>
</td>
</tr>
</tbody>
</table>
</div>
Javascript:
$("#selectedTableFilter").tablesorter({
debug: true,
headerTemplate: "{content}<b></b>",
cssChildRow : "tablesorter-childRow",
widgets: ["zebra","filter"],
sortInitialOrder: "asc",
sortList: [[0,0]],
sortRestart: true,
widgetOptions: {
filter_hideFilters: true,
zebra : ['normal-row', 'alt-row' ],
filter_childRows: true,
filter_cssFilter : 'tablesorter-filter',
filter_startsWith: false,
filter_ignoreCase : true,
filter_childWithSibs: false,
},
widthFixed: true
});
感谢@Mottie
如果您使用的是 tablesorter 的自定义主题,请确保包含以下定义:
.tablesorter-filter {
display: none;
}