index.php
<!DOCTYPE html>
<html>
<head>
<title>Hancie e-Learning Studio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.
dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/dataTables.
bootstrap5.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/
5.1.3/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap5
.min.css" rel="stylesheet">
</head>
<body>
<br>
<table id="myTable" class="table table-hover table-striped table-bordered">
<thead class="bg-success text-light">
<tr>
<th>ID</th>
<th>Date</th>
<th>Products</th>
<th>Quantity</th>
<th>Rate</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<?php
include "connection.php";
$sql="SELECT * FROM fertilizer";
$query=mysqli_query($conn, $sql);
while($row=mysqli_fetch_array($query)){
?>
<tr>
<td><?php echo $row['Fertilizer_ID'];?> </td>
<td><?php echo $row['Date'];?> </td>
<td><?php echo $row['Name'];?> </td>
<td><?php echo $row['Quantity'];?> </td>
<td><?php echo $row['Rate'];?> </td>
<td><?php echo $row['Total'];?> </td>
</tr>
<?php
}
?>
</tbody>
</table>
<script>
$(document).ready(function(){
$("#myTable").dataTable();
});
</script>
</body>
</html>
Output
