<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hancie e-Learning Studio</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com
/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- Datatables CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables
.net/v/bs4/dt-1.10.20/datatables.min.css"/>
<style>
.table thead, .table tfoot{
background-color: #455a64;
color:azure;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<table id="example" class="table table-striped table-bordered"
style="width:100%">
<thead>
<tr>
<th>Date</th>
<th>Name</th>
<th>Total KG</th>
<th>Basic Wage</th>
<th>OT</th>
<th>Total Amount</th>
</tr>
</thead>
<tbody>
<?php
include "connection.php";
$sql="SELECT * FROM tea_bill";
$query=mysqli_query($conn, $sql);
while ($row=mysqli_fetch_array($query)) {
?>
<tr>
<td> <?php echo $row['date']?></td>
<td> <?php echo $row['Name']?></td>
<td> <?php echo $row['Total_KG']?></td>
<td> <?php echo $row['Basic_Wage']?></td>
<td> <?php echo $row['OT']?></td>
<td> <?php echo $row['Total_Amount']?></td>
</tr>
<?php
}
?>
</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist
/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/
js/bootstrap.min.js"></script>
<!-- Datatables JS-->
<script type="text/javascript" src="https://cdn.datatables.net/v/
bs4/dt-1.10.20/datatables.min.js"></script>
<!-- SUM() Datatables-->
<script src="https://cdn.datatables.net/plug-ins/1.10.20/api/
sum().js"></script>
<script>
$(document).ready(function(){
var tabla = $("#example").DataTable({
"createdRow":function(row,data,index){
if(data[5] >= 1000){
}
},
"drawCallback":function(){
var api = this.api();
$(api.column(5).footer()).html(
'Total: '+api.column(5, {page:'current'}).data().sum()
)
}
});
});
</script>
</body>
</html>
Output
