【问题标题】:Unable to recalculate the total sum of a column on filtering in PHP无法在 PHP 中重新计算过滤列的总和
【发布时间】:2025-11-26 11:40:02
【问题描述】:

我真的在为一些代码苦苦挣扎。我正在尝试获取表格中特定列的总数,我的代码如下。

它可以为我提供列的总数 - 但是当我过滤表格时,总数保持不变并且在过滤时不会改变。

例如,当我加载页面时 - transaction_amount 列的总和为 99 - 但是当我过滤它以在过滤器中搜索不同的帐户时,它仍然会抛出 99 作为和。这可能真的很简单,但我已经挣扎了一段时间了。希望你能帮忙?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $('table thead th').each(function(i) {
            calculateColumn(i);
        });
    });

    function calculateColumn(index) {
        var total = 0;
        $('table tr').each(function() {
            var value = parseInt($('td', this).eq(index).text());
            if (!isNaN(value)) {
                total += value;
            }
        });
        $('table tfoot td').eq(index).text('Total: ' + total);
    }
</script>
</head>
<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>  
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 </head>
 <body>
  <div class="container box">
   <h3 align="center">How to Get SUM with Datatable Server-side-processing in PHP</h3>
   <br />

 <table id="example1" class="table table-bordered table-striped">
     <thead>
         <tr>
            <th> Date</th>
            <th>Account</th>
            <th> Transaction Name</th>
            <th> Type</th>
            <th>Method</th>
            <th>Amount</th>
            <th> More</th>
           </tr>
    </thead>
    <?php
    if ($result->num_rows > 0) 
    {        
      while($row = $result->fetch_assoc()) {
        ?>
            <tr class="table table-bordered table-striped" id="row-<?php echo $row["id"]; ?>"> 
                <td style="width: 11%" class="table table-bordered table-striped"><?php echo $row["submitted_date"]; ?></td>
                <td style="width: 11%"class="table table-bordered table-striped" > <?php echo $row["posting_account_number"]; ?></td>
                <td style="width: 45%"class="table table-bordered table-striped"><?php echo $row["transaction_name"]; ?></td>
                <td style="width: 22%"class="table table-bordered table-striped"><?php echo $row["method"]; ?></td>
                <td width="11%"class="table table-bordered table-striped"><?php echo $row["type"]; ?></td>
                <td class="table table-bordered table-striped"><?php echo $row["transaction_amount"]; ?></td>
                <td class="table table-bordered table-striped" align = "" colspan="2">
                  <a <a href="" type="link" class="" data-toggle="modal" data-target="#modal-default<?php echo $row["id"]; ?>"> Details</a> </a>

        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>Total:</td>
                <td></td>
            </tr>
        </tfoot>

【问题讨论】:

  • but when i filter the table 你能举例说明你的意思吗,因为我没看到?
  • 嗨 - 例如,数据表有一个过滤器。因此,如果我将表格中的文本框过滤器更改为不同的帐号 - 因此表格仅显示行中具有该帐号的记录,表格过滤器正确,但底行中的总和不会改变完全没有
  • 我需要查看您的其余代码。看来calculateColumn() 是需要调试的,如果其他一切正常的话。
  • 我登录了。删除你最后的评论。
  • 如果您可以更新您的帖子,显示您的过滤器文本输入的代码,以及与之关联的任何事件处理程序。与此同时,我不再需要登录。不用说,更改您的密码。

标签: php html mysql sum tablefilter


【解决方案1】:

您的代码中的 HTML 代码有很多错误……我想知道它是如何运行的。 &lt;/head&gt; 被写入两次。 &lt;a&gt; 被添加到另一个 &lt;a&gt; 中。 &lt;tr&gt; 未关闭。在末尾。和其他你没有关闭循环。也许这就是你可能一直面临这些问题的原因。休息,我们需要查看过滤器代码来详细说明。

我已在下面纠正了您的问题。

  <script>
    $(document).ready(function() {
        $('table thead th').each(function(i) {
            calculateColumn(i);
        });
    });

    function calculateColumn(index) {
        var total = 0;
        $('table tr').each(function() {
            var value = parseInt($('td', this).eq(index).text());
            if (!isNaN(value)) {
                total += value;
            }
        });
        $('table tfoot td').eq(index).text('Total: ' + total);
    }
</script>

<table id="example1" class="table table-bordered table-striped">
    <thead>
       <tr>
          <th>Date</th>
          <th>Account</th>
          <th>Transaction Name</th>
          <th>Type</th>
          <th>Method</th>
          <th>Amount</th>
          <th>More</th>
       </tr>
    </thead>
    <tbody>
        <?php
           if ($result->num_rows > 0) 
           {        
               while($row = $result->fetch_assoc()) 
               {
                  ?>
                   <tr class="table table-bordered table-striped" id="row-<?php echo $row["id"]; ?>">
                       <td style="width: 11%" class="table table-bordered table-striped"><?php echo $row["submitted_date"]; ?></td>
                       <td style="width: 11%"class="table table-bordered table-striped" > <?php echo $row["posting_account_number"]; ?></td>
                       <td style="width: 45%"class="table table-bordered table-striped"><?php echo $row["transaction_name"]; ?></td>
                       <td style="width: 22%"class="table table-bordered table-striped"><?php echo $row["method"]; ?></td>
                       <td width="11%"class="table table-bordered table-striped"><?php echo $row["type"]; ?></td>
                       <td class="table table-bordered table-striped"><?php echo $row["transaction_amount"]; ?></td>
                       <!-- action -->
                       <td class="table table-bordered table-striped" align = "" colspan="2">
                          <a href="" type="link" class="" data-toggle="modal" data-target="#modal-default<?php echo $row["id"]; ?>"> Details</a>
                       </td>
                  </tr>
                  <?php
               }
        ?>
    </tbody>
    <tfoot>
       <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td>Total:</td>
          <td></td>
       </tr>
    </tfoot>
</table>

根据您的要求更新答案:

给数量一个类,在js函数中,只添加该类的数据。

<script>
    $(document).ready(function() {
        $('table thead th').each(function(i) {
            calculateColumn('.cal_amt');
        });
    });

    function calculateColumn(index) {
        var total = 0;
        $(index).each(function() {
            var value = parseInt($(this).text());
            if (!isNaN(value)) {
                total += value;
                console.log(total);
            }
        });
        $('.show_amt').text('Total: ' + total);
    }
</script>

<table id="example1" class="table table-bordered table-striped">
    <thead>
       <tr>
          <th>Date</th>
          <th>Account</th>
          <th>Transaction Name</th>
          <th>Type</th>
          <th>Method</th>
          <th>Amount</th>
          <th>More</th>
       </tr>
    </thead>
    <tbody>
        <?php
           if ($result->num_rows > 0) 
           {        
               while($row = $result->fetch_assoc()) 
               {
                  ?>
                   <tr class="table table-bordered table-striped" id="row-<?php echo $row["id"]; ?>">
                       <td style="width: 11%" class="table table-bordered table-striped"><?php echo $row["submitted_date"]; ?></td>
                       <td style="width: 11%"class="table table-bordered table-striped" > <?php echo $row["posting_account_number"]; ?></td>
                       <td style="width: 45%"class="table table-bordered table-striped"><?php echo $row["transaction_name"]; ?></td>
                       <td style="width: 22%"class="table table-bordered table-striped"><?php echo $row["method"]; ?></td>
                       <td width="11%"class="table table-bordered table-striped cal_amt"><?php echo $row["type"]; ?></td>
                       <td class="table table-bordered table-striped"><?php echo $row["transaction_amount"]; ?></td>
                       <!-- action -->
                       <td class="table table-bordered table-striped" align = "" colspan="2">
                          <a href="" type="link" class="" data-toggle="modal" data-target="#modal-default<?php echo $row["id"]; ?>"> Details</a>
                       </td>
                  </tr>
                  <?php
               }
        ?>
    </tbody>
    <tfoot>
       <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td class="show_amt">Total:</td>
          <td></td>
       </tr>
    </tfoot>
</table>

【讨论】:

  • 我已经对过滤器问题进行了排序。但是,使用下面的脚本: $(document).ready(function() { $('table thead th').each(function(i) { calculateColumn(i); }); });函数calculateColumn(index) { var total = 0; $('table tr').each(function() { var value = parseInt($('td', this).eq(index).text()); if (!isNaN(value)) { total +=价值; } }); $('table tfoot td').eq(index).text('Total: ' + total); } 它显示所有列的总和,我只需要数量
  • 然后给数量&lt;td&gt;一个类,在js函数中,只添加那个类的数据。