如何对数据表中特定数据列的值求和

Posted 2023-05-09

【中文标题】如何对数据表中特定数据列的值求和

【英文标题】：How to sum value in specific column of data in datatable

【发布时间】：2021-12-13 09:09:02

【问题描述】：

我有来自数据库的数据列表，其中包含销售数据。我以 dataTable 格式显示它们，一切正常。我需要在 tfoot（页脚）中的两个列中显示总和，但总和不显示。 我试图得到每列的总和并在页脚中显示结果。我正在使用 Datatables 提供的“footerCallback”函数。但是它没有在页脚中显示任何内容

我的 java 脚本代码

if(!empty($report))
  if($report->num_rows()>0)?>
  <table class="table table-bordered table-striped" id="dataTable"  cellspacing="0">
    <thead class="thead-dark">
      <tr>
        <th>No</th>
        <th>Date</th>
        <th>Created at</th>
        <th>Shop</th>
        <th>Product</th>
        <th>Type</th>
        <th>Unit Price</th>
        <th>Quantity</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <?php
      foreach($report->result() as $s)
        $page++;
        ?>
        <tr>
          <td><?php echo $page; ?></td>
          <td><?php echo date('d/m/Y',strtotime($s->sales_date)); ?></td>
          <td><?php echo date('d/m/Y',strtotime($s->created_at)); ?></td>
          <td><?php echo $s->shop_name; ?></td>
          <td><?php echo $s->product_name; ?></td>
          <td>
            <?php if($s->sales_type==0)
                      echo"Wholesale";
                  else
                      echo"Retail";?>
          </td>
          <td><?php echo number_format($s->unit_price); ?></td>
          <td><?php echo $s->qty; ?></td>
          <td><?php echo number_format($s->price); ?></td>
        </tr>
        <?php
      
      ?>
    </tbody>
     <tfoot>
     <tr>
        <th colspan="7">Total</th> 
        <th></th> 
        <th></th> 
        </tr>
     </tfoot>
  </table>
<div class="pagination"><?php echo $links; ?></div>
<div class="form-group">
    <a href="<?=base_url();?>user/printrangereport/<?=$startdate;?>/<?=$enddate;?>/<?=$theshop;?>/<?=$theproduct;?>" class="btn btn-primary" target="_blank">PRINT</a>
 </div>
<?php 
else
  ?>
<div class="errors" role="alert">
  No Information was Found.
  <span class="closebtn pull-right" style="float: right;" onclick="this.parentElement.style.display='none';">&times;</span></div>
  <?php
?>
</div>
</div>
</div>
</div>
</div>

<script type="text/javascript">
$(document).ready(function() 
    $('#dataTable').DataTable( 
        searching: true, 
        responsive: false, 
        paging: false,
        pageLength: 10,
        dom: "<'row'<'col-sm-8'B><'col-sm-4'f>>tp", 
        buttons: [  
            extend: 'copy', className: 'btn-sm', footer: true, 
            extend: 'csv', title: 'ExampleFile', className: 'btn-sm', footer: true, 
            extend: 'excel', title: 'ExampleFile', className: 'btn-sm', footer: true, title: 'exportTitle', 
            extend: 'pdf', title: 'ExampleFile', className: 'btn-sm', footer: true, 
            extend: 'print', className: 'btn-sm', footer: true 
        ],
        "footerCallback": function ( row, data, start, end, display ) 
            var api = this.api(), data;
            var intVal = function (i) 
                return typeof i === 'string' ? i.replace(/[\$,]/g, '')*1:typeof i === 'number' ? i : 0;
            ;  
            //#----------- Total over this page------------------#
           
            qtyTotal = api.column(7,  page: 'current' ).data().reduce( function (a, b) 
                    return intVal(a) + intVal(b);
                ,0);  
            priceTotal = api.column(8,  page: 'current' ).data().reduce( function (a, b) 
                    return intVal(a) + intVal(b);
                ,0); 
            //#-----------ends of Total over this page------------------#

            // Update footer
            $( api.column(7).footer()).html(qtyTotal);
            $( api.column(8).footer()).html(priceTotal);
        
     );
 );
</script>

【问题讨论】：

能否请您提供呈现的 HTML，我们不应该对页面的内容做出假设。 -> Minimal, Reproducible Example

当您询问 jquery 并标记为 html 时，请删除 php 部分，因为它们似乎不相关，这意味着我们（尽管应该是您）无法创建minimal reproducible example.

在尝试更新页脚之前，您是否调试了 qtyTotal 和 priceTotal 的内容？

【参考方案1】：

很久以前我用过这个功能，也许对你有帮助。

$(document).ready(function() 
    $('#example').dataTable( 
        
        "columnDefs": [
               className: "crdr", "targets": [4] 
            ],
        
        "footerCallback": function ( row, data, start, end, display ) 
            var api = this.api(), data;
 
            // Remove the formatting to get integer data for summation
            var intVal = function ( i ) 
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            ;
 
            // Total over all pages
            total = api
                .column( 4 )
                .data()
                .reduce( function (a, b) 
                    return intVal(a) + intVal(b);
                 );
 
            // Total over this page
            pageTotal = api
                .column( 4,  page: 'current' )
                .data()
                .reduce( function (a, b) 
                    return intVal(a) + intVal(b);
                , 0 );
 
            // Update footer
            $( api.column( 4 ).footer() ).html(
                '$'+pageTotal +' ( $'+ total +' total)'
            );
        
     );
 );

这里正在工作fiddle