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

Question

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

我的 java 脚本代码

if(!empty($report)){
  if($report->num_rows()>0){?>
  <table class="table table-bordered table-striped" id="dataTable" width="100%" 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>

Answer 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