I need datatable to be implemented in my project. I wanna show total number at the bottom of the table like below:
I already make default data table like this :
This is my code.
<?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>   Last 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">   Tanggal</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>
I've already searched but, there's few reference but I couldn't understand that How I can add Total cell and show at the bottom of datatable?
