Jerery Datatableの下部に合計セルを追加する方法

私のプロジェクトでは、データテーブルを実装する必要があります。Jerery Datatableの下部に合計セルを追加する方法

私はすでにこのように、デフォルトのデータテーブルを作成：これは私のコードは

である私は、以下のようなテーブルの下部に合計数を表示したいです。

<?php 
    include "db.php"; 
    $obj->tglan=$obj->get_hari(); 
    if (isset($_POST['tanggal2'])) { 
     $obj->tglan = $_POST['tanggal2']; 

    } 
?> 


<!DOCTYPE html> 
<html> 
<head> 

    <script type="text/javascript" src="assets/DataTables/media/js/jquery.js"></script> 
    <script type="text/javascript" src="assets/DataTables/media/js/jquery.dataTables.js"></script> 
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css"> 
    <link rel="stylesheet" type="text/css" href="assets/DataTables/media/css/jquery.dataTables.css"> 
    <link rel="stylesheet" type="text/css" href="assets/DataTables/media/css/dataTables.bootstrap.css"> 
    <link rel="stylesheet" href="assets/css/bootstrap.min.css"/> 
    <link rel="stylesheet" href="assets/datepicker/css/bootstrap-datepicker3.css"/> 
</head> 
<body> 
    <center> 

     <h3>Daftar SPTA<br><?php echo $obj->tanggal("D, j M Y",$obj->tglan);?></h3> 
    </center> 
    <left> 
     <h5>&nbsp&nbsp&nbspLast refreshed : <?php echo $obj->tanggal("D, j M Y",$obj->tglan)." ".date("H:i:s");?></h5> 
    </left> 
    <br/> 
    <form action="viewLaporanUtama2.php" method="POST"> 
      <div class="form-group" > 
       <label for="tanggal">&nbsp&nbsp&nbspTanggal</label> 
       <input type="text" name="tanggal1" class="tanggal" id="myText" required/> 
       <input type="submit" name="enter" value="Cari" class="btn btn-info btn-sm"> 
      </div> 
    </form> 

    <div class="container-fluid"> 
     <div class="table-responsive"> 
     <table border = '0' class="table table-striped table-bordered data" id="tabelSpta"> 
      <thead> 
       <tr> 
        <th>No</th> 
        <th>No SPTA</th>    
        <th>No Register Induk</th> 
        <th>Nama Petani</th> 
        <th>Gawang/Pos</th> 
        <th>Timbang Bruto</th> 
        <th>Giling</th> 
        <th>Timbang Tarra</th> 
        <th>Netto(kw)</th> 
        <th>Kode Rafraksi</th> 
        <th>Potongan (kw)</th> 
        <th>Netto Akhir (kw)</th> 

       </tr> 
      </thead> 
      <tbody> 
       <div id="bagReload"> 
        <?php 
         echo $obj->tampilLaporan(); 
        ?> 
       </div> 

      </tbody> 
     </table> 
    </div> 
    </div> 
</body> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     var tabel = $('.data').DataTable(); 
    }); 

</script> 
<!-- <script src="js/jquery-3.2.1.min.js"></script> --> 
<script src="assets/js/bootstrap.js"></script> 
<script src="assets/datepicker/js/bootstrap-datepicker.js"></script> 
<script type="text/javascript"> 
      $(document).ready(function() { 
       $('.tanggal').datepicker({ 
        format: "yyyy-mm-dd", 
        autoclose:true 
       }); 
      }); 
</script> 
</html>

私はすでに検索したけど、いくつかの参照がありますが、私は、私はデータテーブルの下部に合計セルとショーを追加するにはどうすればよいということを理解することができませんでしたか？

出典

2017-08-10 Josh Parinussa

cherckそれを：https://datatables.net/reference/option/footerCallbackともここに：https://datatables.net/フォーラム/ディスカッション/ 35087/how-to-add-a-total-row-for-the-of-data-tables – volkinc

ここの例を参照してくださいhttp://jsbin.com/putiyep/edit?js,output bindridによって書かれています。

http://jsbin.com/putiyep/edit?js,output

は、基本的にはAPIのfooterCallbackを活用し、あなたの合計を返すために、テーブルや基本的な数学の列インデックスを使用します。コードの

抜粋（再びではない私のコード）：

// Table definition 
var dtapi = $('#example').DataTable({ 
    data: dataSet, 
    pageLength: 3, 
    "deferRender": false, 
    "footerCallback": function (tfoot, data, start, end, display) { 
     var api = this.api(); 
     var p = api.column(4).data().reduce(function (a, b) { 
      return a + b; 
     }, 0) 
     $(api.column(4).footer()).html(p); 
     $("#total").val(p); 
    }, 
    "order": [1], 
    "columns": [ 

     // rest of the columns 
     { data: "first_name" }, 
     { data: "last_name" }, 
     { data: "firstNumber" }, 
     { 
      data: "secondNumber", render: function (data) { 
       return '<input type="text" style="width:50px" value="' + data + '">'; 
      } 
     }, 
     { data: "rowTotal" } 

    ] 
});

出典

2017-08-10 14:09:01

Jerery Datatableの下部に合計セルを追加する方法

答えて

関連する問題