The datatable cant display the searching and sorting, may I know why? The problem is, the searching, sorting didn’t display. But when I use HTML code 100% then it will display, but when I use data that fetch from MySQL, it didn’t display the searching and sorting but it displays the table. I’m new to this and still a student. This is where the js and css link I take
datatable
table for datatype
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Content filter for IHSR</title>
<!--Link from datatable for sort,pagging,search-->
<link href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
</head>
<body >
<?php
include('connection.php');
// select column from table ihsr_facebook_content
$query = "SELECT * FROM customer ORDER BY Customer_Name ASC";//later change to DESC
// get results from database
$result = mysqli_query($connect, $query);
// display data in table
if(mysqli_num_rows($result)>0)
{
$output = '<div>
<table id="example" class="display" style="width:100%">
<thead class="table-dark">
<tr>
<th style="padding-left: 10px; padding-right: 20px;" >No.</th>
<th style="padding-left: 10px; padding-right: 20px;" colspan="2">Name</th>
<th style="padding-left: 10px; padding-right: 20px;" >Email</th>
<th style="padding-left: 10px; padding-right: 20px;" >Contact</th>
<th style="padding-left: 10px; padding-right: 20px;" >Address</th>
<th width="7%">Edit</th>
<th width="9%">Delete</th>
</tr>
</thead>
<tbody>';
$num = mysqli_num_rows($result);
$count= 1 ;
// loop through results of database query, displaying them in the table
while($row = mysqli_fetch_array( $result )) {
$Customer_ID = $row['Customer_Id'];
$Customer_Name = $row['Customer_Name'];
$Customer_Email = $row['Customer_Email'];
$Customer_Contact = $row['Customer_Contact'];
$Customer_Address = $row['Customer_Address'];
// echo out the contents of each row into a table
$output.='<tr>
<td>'.$count.'</td>
<td colspan="2">'.$Customer_Name.'</td>
<td>'.$Customer_Email.'</td>
<td>'.$Customer_Contact.'</td>
<td>'.$Customer_Address.'</td>
<td><a class="btn-1" href="product_edit.php?GetEdit='.$Customer_ID.'" id="myBtn">Edit</a></td>
<td><button type="button" class="delButton btn-1" data-toggle="modal" id="'.$Customer_ID.'" data-target="#myModal" >Delete</button></td>
</tr>';
$count++;
}
}
// close table>
echo $output.'</tbody></table></div>';
?>
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</body>
</html>