我有一个带有tablesorter的表，在其中我希望有十进制列的总和，还希望有可能按任何列筛选数据。
当我按小数筛选表时，它工作得很好，但当我按日期筛选表时，带有总计的行就会消失。
$($('#incomesTable').tablesorter({
theme: 'bootstrap',
sortInitialOrder: "desc",
widgets: ['math', 'zebra', 'filter'],
widgetOptions: {
filter_cssFilter: '',
filter_childRows: false,
filter_hideFilters: false,
filter_ignoreCase: true,
filter_saveFilters: true,
filter_searchDelay: 300,
filter_startsWith: false,
math_data: 'math',
// math_ignore: [0, 1],
math_none: 'N/A',
math_complete: function($cell, wo, result, value, arry) {
var txt = '<span class="align-decimal">' +
result + '</span>';
if ($cell.attr('data-math') === 'all-sum') {
return txt + ' (Sum of ' + arry.length + ' cells)';
}
return txt;
},
math_completed: function(c) {
console.log('math calculations complete', c.$table.find('[data-math="all-sum"]:first').text());
},
math_textAttr: '',
math_mask: '0.##',
math_prefix: '',
math_suffix: '',
math_event: 'recalculate',
math_priority: ['row', 'above', 'below', 'col'],
math_rowFilter: ''
}
}));
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/css/theme.bootstrap.min.css" integrity="sha512-1r2gsUynzocV5QbYgEwbcNGYQeQ4jgHUNZLl+PMr6o248376S3f9k8zmXvsKkU06wH0MrmQacKd0BjJ/kWeeng==" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js" integrity="sha512-qzgd5cYSZcosqpzpn7zF2ZId8f/8CHmFKZ8j7mU4OUXTNRd5g+ZHBPsgKEwoqxCtdQvExE5LprwwPAgoicguNg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.widgets.min.js" integrity="sha512-dj/9K5GRIEZu+Igm9tC16XPOTz0RdPk9FGxfZxShWf65JJNU2TjbElGjuOo3EhwAJRPhJxwEJ5b+/Ouo+VqZdQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/widgets/widget-math.min.js" integrity="sha512-9bQAn0y1alBDFoH7VsUSKQd0ilHlbtsGkfjBDIR0iIerF0kvzUp/CfRubUkYT13Ithu0jZ3T+9vBC7FooHwWXQ==" crossorigin="anonymous"></script>
<table id="incomesTable" class="table table-sm table-striped table-hover tablesorter">
<thead>
<tr>
<th>Date</th>
<th>Date</th>
<th>Decimal</th>
<th>Decimal</th>
<th>Decimal</th>
</tr>
</thead>
<tbody>
<tr>
<td>01.10.2020</td>
<td>01.10.2020</td>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>01.11.2020</td>
<td>01.11.2020</td>
<td>10</td>
<td>20</td>
<td>30</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="2">Total</th>
<th data-math="col-sum">col-sum</th>
<th data-math="col-sum">col-sum</th>
<th data-math="col-sum">col-sum</th>
</tr>
</tbody>
</table>
正在工作的JSFIDLE:https://jsfidle.net/rorymccrossan/ak29tupf/
这个问题是因为当您执行筛选器时，表管理器正在查找计算值。
在您的示例中，在第一个十进制字段中搜索10将显示计算出的行，因为它的值匹配，例如。110。但是，当您搜索日期时，该列的计算单元格只包含单词“Total”，因此不匹配，并且计算行被隐藏。
解决此问题的快速方法是将计算出的行移到TFoot元素中，将其从筛选中排除：
<tfoot>
<tr>
<th colspan="2">Total</th>
<th data-math="col-sum">col-sum</th>
<th data-math="col-sum">col-sum</th>
<th data-math="col-sum">col-sum</th>
</tr>
</tfoot>
工作实例
或者，在只包含计算行的TBody上放置一个类，并使用TableSorter的CSSInfoBlock属性从筛选中排除该内容：
$($('#incomesTable').tablesorter({
cssInfoBlock: 'calc',
// other settings...
});
<tbody class="calc">
<tr>
<th colspan="2">Total</th>
<th data-math="col-sum">col-sum</th>
<th data-math="col-sum">col-sum</th>
<th data-math="col-sum">col-sum</th>
</tr>
</tbody>
工作实例
