<!DOCTYPE html>
<html>
<head>
<title>Ajax DataTable Example</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
</head>
<body>
<table id="myTable" class="display" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>City</th>
</tr>
</thead>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#myTable').DataTable({
"ajax": {
"url": "data.php",
"type": "POST"
}
});
});
</script>
</body>
</html>
<?php
$data = array(
array('id' => 1, 'name' => 'John Doe', 'email' => 'john@example.com', 'city' => 'New York'),
array('id' => 2, 'name' => 'Jane Smith', 'email' => 'jane@example.com', 'city' => 'London'),
array('id' => 3, 'name' => 'Mike Johnson', 'email' => 'mike@example.com', 'city' => 'Paris')
);
echo json_encode(array('data' => $data));
?>