Question

我正在尝试将mysql数据的总和放在我的数据表页脚中，但它什么也没显示，我的代码中没有收到任何错误，只是没有显示任何内容。顺便说一句，输出基于日期范围。

    <table id="product_data" class="table table-bordered table-striped">
     <thead>
      <tr>
       <th>Date</th>
       <th>Invoice Number</th>
       <th>Code</th>
       <th>Model</th>
       <th>Desc</th>
       <th>Price</th>
       <th>Qty</th>
       <th>Total</th>
      </tr>
     </thead>
      <tfoot>
        <tr>
            <th colspan="4" style="text-align:right">Total:</th>
            <th></th>
        </tr>
    </tfoot>

这是我的javascript代码，这完全正常，但在页脚中没有显示任何内容。我必须得到TOTAL列的总和，这是第7顺序。

<script type="text/javascript" language="javascript" > 
$(document).ready(function(){
 function fetch_data(is_date_search, from_date='', to_date='')
 {
  var dataTable = $('#product_data').DataTable({

   "processing" : true,
   "serverSide" : true,
   "order" : [],
   "ajax" : {
    url:"fetch_dsr.php",
    type:"POST",
    data:{
     is_date_search:is_date_search, from_date:from_date, to_date:to_date
    }
   },

     "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;
            };

            var amtTotal = api
                .column( 7 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );



           $( api.column( 7 ).footer() ).html('amtTotal');
        },


       dom: 'Bfrtip',
        buttons: [{
        extend: 'pdf',
        download: 'open',
    customize: function(doc) {

       console.dir(doc)
       doc.content[1].margin = [ 0, 0, 0, 0 ] //left, top, right, bottom
    }

        }]

  });
 }

 $('#search').click(function(){
  var from_date = $('#from_date').val();
  var to_date = $('#to_date').val();
  if(from_date != '' && to_date !='')
  {
   $('#product_data').DataTable().destroy();
   fetch_data('yes', from_date, to_date);
  }
  else
  {
   alert("Date is required");
  }
   }); 
});
</script>

// PHP fetch_dsr，获取数据

<?php

$connect = mysqli_connect("localhost", "root", "", "mydb");
$column = array("soldout_tb.s_ID", "soldout_tb.invoice_date", "soldout_tb.invoice_number","soldout_tb.order_number", "soldout_tb.control_number","soldout_tb.remarks");
$query = "
 SELECT * FROM soldout_tb 
 INNER JOIN allinvty3 
 ON allinvty3.in_code = soldout_tb.itemcode 
";
$query .= " WHERE ";


if($_POST["is_date_search"] == "yes")
{
 $query .= 'soldout_tb.invoice_date BETWEEN "'.$_POST["from_date"].'" AND "'.$_POST["to_date"].'" AND ';
}


if(isset($_POST["search"]["value"]))
{
 $query .= '(soldout_tb.s_ID LIKE "%'.$_POST["search"]["value"].'%" ';
 $query .= 'OR soldout_tb.invoice_date LIKE "%'.$_POST["search"]["value"].'%" ';
 $query .= 'OR soldout_tb.invoice_number LIKE "%'.$_POST["search"]["value"].'%" ';
 $query .= 'OR soldout_tb.control_number LIKE "%'.$_POST["search"]["value"].'%" ';
 $query .= 'OR soldout_tb.order_number LIKE "%'.$_POST["search"]["value"].'%") ';
}

if(isset($_POST["order"]))
{
 $query .= ' ORDER BY '.$column[$_POST['order']['0']['column']].' '.$_POST['order']['0']['dir'].' ';
}
else
{
 $query .= '  ORDER BY soldout_tb.control_number ASC ';
}

$query1 = '';


$number_filter_row = mysqli_num_rows(mysqli_query($connect, $query));

$result = mysqli_query($connect, $query . $query1);

$data = array();

while($row = mysqli_fetch_array($result))
{
 $sub_array = array();
  $sub_array[] = $row["invoice_date"];
   $sub_array[] = $row["invoice_number"];
 $sub_array[] = $row["itemcode"];
 $sub_array[] = $row["ecr_desc"];
  $sub_array[] = $row["ite_desc"];
 $sub_array[] = $row["price"];
  $sub_array[] = $row["qty"];
  $sub_array[] = $row["total_amount"];

 $data[] = $sub_array;
}

function get_all_data($connect)
{
 $query = "SELECT * FROM soldout_tb ";
 $result = mysqli_query($connect, $query);
 return mysqli_num_rows($result);
}

$output = array(
 "draw"    => intval($_POST["draw"]),
 "recordsTotal"  =>  get_all_data($connect),
 "recordsFiltered" => $number_filter_row,
 "data"    => $data
);

echo json_encode($output);

?>

Answer 1

试试这段代码：

"footerCallback": function( tfoot, 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;
           };

           var amtTotal = api
               .column( 7 )
               .data()
               .reduce( function (a, b) {
                   return intVal(a) + intVal(b);
               }, 0 );
        $(tfoot).find('th').eq(1).html(amtTotal );
      },

HTML

<table id="product_data" class="table table-bordered table-striped">

     <thead>
      <tr>
       <th>Date</th>
       <th>Invoice Number</th>
       <th>Code</th>
       <th>Model</th>
       <th>Desc</th>
       <th>Price</th>
       <th>Qty</th>
       <th>Total</th>
      </tr>
     </thead>
     <tbody>
     </tbody>
      <tfoot>
        <tr>
            <th colspan="7" style="text-align:right">Total:</th>
            <th></th>
        </tr>
    </tfoot>

要在PDF中传递页脚，请传递页脚：true，

dom: 'Bfrtip',
        buttons: [{
        extend: 'pdf', footer: true,
        download: 'open',

<强>更新

仅显示一次总计：

customize: function(data, button, exportObject){
        var lastrow = $(data.content[1].table.body).length;
        $(data.content[1].table.body).each(function(i,val){
            if(i == (lastrow-1)){
                for(i = 0; i < val.length; i++) {
                    if(val[i].text == 'Total:' && i<(val.length-2)){
                    val[i].text = '';
                    }
                }
                data[i] = val;
            }
       });
       data.content[1].margin = [ 0, 0, 0, 0 ] //left, top, right, bottom
    }

DataTable上的页脚

1 个答案: