jQuery DataTable with AJAX JSON data API

Creative Javascript | February 20, 2022

Today in this blog you’ll learn how to show jQuery DataTable with AJAX JSON data API. In this article the main topic is you can show AJAX JSON data from external API in jQuery DataTable.

Video tutorial of jQuery DataTable with AJAX JSON data API

This tutorial video can help you to show jQuery DataTable with AJAX JSON data API

jQuery DataTable with AJAX JSON data API [Source Codes]

This source code can help you to show jQuery DataTable with AJAX JSON data API
Plug-In source

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="container">
	
	<table id="example" class="display" style="width:100%">
	  <thead>
	      <tr>
	          <th>Name</th>
	          <th>Position</th>
	          <th>Office</th>
	          <th>Extn.</th>
	          <th>Start date</th>
	          <th>Salary</th>
	      </tr>
	  </thead>
	  <tfoot>
	      <tr>
	          <th>Name</th>
	          <th>Position</th>
	          <th>Office</th>
	          <th>Extn.</th>
	          <th>Start date</th>
	          <th>Salary</th>
	      </tr>
	  </tfoot>
	</table>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #6ebce2;
	color: #000;

	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}

input,select{
	background-color: #fff !important;
}
.container{
	max-width: 1100px;
	width: 100%;
}
table thead tr td,
table thead tr th,
table tfoot tr td,
table tfoot tr th{
	background-color: #000;
	color: #fff;
}
#example_filter{
	margin-bottom: 20px;
}

JavaScript Code

Copy

var xmlhttp = new XMLHttpRequest();
var url = "http://localhost/datatable/js/jsonData.json";
xmlhttp.open("GET",url,true);
xmlhttp.send();
xmlhttp.onreadystatechange = function(){
  if(this.readyState == 4 && this.status == 200){
    var data = JSON.parse(this.responseText);
    //console.log(data)

    $('#example').DataTable( {
        //"ajax": "data/objects.txt",
        "data":data.data,
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }
        ]
    } );

  }
}
//this is  jsonData.json
//{
//   "data": [
//     {
//       "id": "1",
//       "name": "Tiger Nixon",
//       "position": "System Architect",
//       "salary": "$320,800",
//       "start_date": "2011/04/25",
//       "office": "Edinburgh",
//       "extn": "5421"
//     }
//   ]
// }