如何在DataTable中统计列的不同取值及总和？

实现思路 #

先给表格添加页脚区域，再通过fnFooterCallback遍历目标列数据，统计Yes/No的出现次数，最后把统计结果渲染到页脚中。

修改后的完整代码 #

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<table id="question">
  <thead>
    <tr>
      <th>Question 1</th>
      <th>Question 2</th>
      <th>Question 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Yes</td>
      <td>Hot</td>
      <td>Yes</td>
    </tr>
    <tr>
      <td>No</td>
      <td>Cold</td>
      <td>Yes</td>
    </tr>
    <tr>
      <td>No</td>
      <td>Hot</td>
      <td>Yes</td>
    </tr>
  </tbody>
  <!-- 添加页脚用于展示统计结果 -->
  <tfoot>
    <tr>
      <td colspan="3"></td>
    </tr>
  </tfoot>
</table>

JS代码

$('#question').dataTable({
  fnFooterCallback: function(nRow, aaData, iStart, iEnd, aiDisplay) {
    // 初始化统计计数器
    let yesCount = 0;
    let noCount = 0;
    
    // 遍历当前页显示的行（若要统计全表，直接遍历aaData即可）
    for (let i = iStart; i < iEnd; i++) {
      const rowIndex = aiDisplay[i];
      const q1Value = aaData[rowIndex][0]; // 第0列对应Question 1，按实际列位置调整索引
      
      if (q1Value === 'Yes') {
        yesCount++;
      } else if (q1Value === 'No') {
        noCount++;
      }
    }
    
    // 计算总票数
    const total = yesCount + noCount;
    
    // 将统计结果插入页脚单元格
    $(nRow).find('td').html(`
      Yes ${yesCount}<br>
      No  ${noCount}<br>
      Total Votes (Y+N)   ${total}
    `);
  }
});

关键说明 #

• 必须给表格添加<tfoot>标签，否则fnFooterCallback找不到渲染统计结果的目标元素
• aaData是表格的全量数据源，aiDisplay是当前页显示的行索引集合；如果需要统计全表数据，直接遍历aaData即可，无需使用iStart和iEnd
• 代码中aaData[rowIndex][0]对应Question 1列，若目标列位置变化，需同步调整索引值

内容的提问来源于stack exchange，提问作者Jefferson