Ajax Datatable Implement in HTML

AuthorSumit Dey Sarkar

Pubish Date22 Mar 2023


In 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>
	<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"/>
	<table id="myTable" class="display">

	<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>
		$(document).ready(function() {
				"processing": true,
				"serverSide": true,
				"ajax": "data.php",
				"columns": [
					{ "data": "id" },
					{ "data": "name" },
					{ "data": "age" },
					{ "data": "gender" }


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.

Comments 0

Leave a comment