jQuery tablesorter 仅对子行分组小计

Posted 2023-05-09

【中文标题】jQuery tablesorter 仅对子行分组小计

【英文标题】：jQuery tablesorter grouping subtotals for child rows only

【发布时间】：2017-05-06 02:53:29

【问题描述】：

我需要在表格的组标题行中显示组小计。除了数学，一切都很好。在每个组内，我扩展了父行，其中包含该父级的所有子行的总数。当我汇总我的组时，它将所有父行和子行加在一起，给我的总数是我正在寻找的数字的 2 倍。有没有办法只添加子行或只添加父行？这是我到目前为止所拥有的：

group_callback: function($cell, $rows, column, table) 
   if (column === column) 
      var t, successesTotal = 0;
      $rows.each(function() 
            successesTotal += parseInt($(this).parent('td').eq(successesColumn).text());
);

我尝试了几种看似合乎逻辑的不同方法，但似乎都不起作用。

successesTotal += parseInt($(this).find('tbody tr.tablesorter-childRow td').eq(successesColumn).text());

没用。也没有：

$rows.each(function() 
     if ($('tr').hasClass('tablesorter-childRow')) 
         successesTotal += parseInt($(this).parent('td').eq(successesColumn).text());
 );

我非常接近完全按照我的需要完成这项工作，但我仍然需要从计算中排除父行，这将是完美的。在所附图像中，粗体线是显示其子行总数的父行。成功应该是 165，总行数应该是 6（或 2，无论哪种方式都对我有用！）我已经花了将近 2 天的时间试图解决这个问题。任何建议，将不胜感激！！

根据要求，这里是表格 html（为简化而修改）：

<table class="tablesorter">
   <thead>
     <th class="group-word">Column1</th>
     <th class="group-false filter-parsed">Column2</th>
     <th class="group-false filter-parsed">Column3</th>
   </thead>
   <tbody>
      <tr>
         <td>Category1</td>
         <td><a href="#" class="toggle">Category2</a></td>
         <td>Subtotal1</td>
      </tr>
      <tr class="tablesorter-childRow">
         <td>ChildData1</td>
         <td>ChildData2</td>
         <td>ChildData3</td>
      </tr>
      <tr class="tablesorter-childRow">
         <td>ChildData1</td>
         <td>ChildData2</td>
         <td>ChildData3</td>
      </tr>
  </tbody>

我想用 ChildData3 添加 ChildData3。我需要排除 SubTotal1。

【问题讨论】：

如果有影响，我使用 Mottie 的 tablesorter 叉

【参考方案1】：

group_callback 中的 $rows 参数同时提供父行和所有子行，因此您需要过滤掉其中一个。

// only target child rows
$rows.filter('.tablesorter-childRow')

这是来自this demo的代码

var successesColumn = 0;
$("#table").tablesorter(
  theme: "blue",
  widgets: ["group", "filter", "zebra"],
  widgetOptions: 
   group_collapsible : true,
    group_callback: function($cell, $rows, column, table) 
      if (column === successesColumn) 
        var t, successesTotal = 0;
        $rows.filter('.tablesorter-childRow').each(function() 
          successesTotal += parseInt($(this).find('td').eq(successesColumn).text(), 10);
        );
        $cell.find(".group-count").append("; Successes: " + successesTotal );
      
    
  
);

其他修复：

$rows 变量中包含 trs，因此请使用 .find('td') 而不是父变量。 在对十进制整数使用parseInt 时，养成添加基数10 的好习惯(ref)

【讨论】：

莫蒂 - 这是完美的。太感谢了！！虽然我明白自己想要做什么，但我终其一生都无法弄清楚如何完成它。这正是我所需要的。我还能够将相同的过滤器应用于 group_count 以显示正确的行数。

PS - 爱你的 tablesorter 叉子。非常好的功能:)

不确定这是否是添加此内容的正确方法，但我无法为其添加分页。我收到以下错误：$table.tablesorter(...).tablesorterPager 不是函数

我仔细检查并加载了 jquery、jquery.tablesorter.js、widget-storage.js、widget-filter.js、widget-grouping.js、jquery.tablesorter.pager.js、widget -pager.js 在调用 .tableSorterPager(container: $("#pager"));但我仍然收到错误消息。我猜是命名空间错误。有什么想法吗？

如果您使用插件，则不需要widget-pager。请确认分页器插件正在加载 - 检查路径和文件名 - 并且只加载了一个版本的 jQuery。

【参考方案2】：

您可以尝试像这样只遍历子行，而不是遍历表中的每一行

$('.tablesorter-childRow').each(function() );

编辑

Check out this JSFiddle

【讨论】：

谢谢，但没有运气。这种方式确实只抓取子行，但它总计整个表而不是单个组。我还尝试将此行放在 $rows.each 函数中，反之亦然，以尝试保留分组功能，但这给了我 0 或 NaN。

您可以向父行的successColumn 添加一个类，例如“groupTotal”。这样，您可以添加类“groupTotal”的所有值。

这只是您的标准 HTML 表格，添加了几个类。这是我遇到问题的 jquery 插件。