Tablesorter筛选器和求和问题

Question

我有一个带有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/

Answer 1

这个问题是因为当您执行筛选器时，表管理器正在查找计算值。

在您的示例中，在第一个十进制字段中搜索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>

工作实例