Sumit Dey
Sarkar
22 Mar 2023
JQueryIn this tutorial we will learn ajax datatable implement in HTML.
Ajax datatable implement in HTML
here's an example of an Ajax Datatable implemented in HTML:
<!DOCTYPE html>
<html>
<head>
<title>Ajax Datatable Example</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.24/datatables.min.css"/>
</head>
<body>
<table id="myTable" class="display">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.24/datatables.min.js"></script>
<script>
$(document).ready(function() {
$('#myTable').DataTable({
"processing": true,
"serverSide": true,
"ajax": "data.php",
"columns": [
{ "data": "id" },
{ "data": "name" },
{ "data": "age" },
{ "data": "gender" }
]
});
});
</script>
</body>
</html>
This example assumes that you have a PHP file called data.php that returns data in the following JSON format:
{
"data": [
{
"id": "1",
"name": "John Doe",
"age": "25",
"gender": "Male"
},
{
"id": "2",
"name": "Jane Smith",
"age": "30",
"gender": "Female"
},
{
"id": "3",
"name": "Bob Johnson",
"age": "40",
"gender": "Male"
}
]
}
This data will be loaded into the DataTable using Ajax. The DataTable will handle pagination, searching, and sorting of the data automatically.
