In this post I will show you how to fetch JSON data from file and display in JQuery Datatables. JSON data format is a very light data format for storing data. Do you know what is JQuery Datatables, it is a JQuery plugin for display data in Table format. By using this JQuery plugin you can not only display data in table also but it provides other fetures like search data from html data, you can control on how many records you want to display on single page, it also provide features like display data in ascending or decending order and it also provide pagination to data also. This is very useful jquery plugin which cover also most all part which required for web application. Here I have simply store data in JSON file and I will simply fetch data from JSON file by using JQuery Ajax data source method, in this method We want to specified name of json file which we have present in our working folder and by using data table method. By using this JQuery plugin you can get many number of features without writing any line of code. This whole things I have describe in my video tutorial, so for more information watch video tutorial on how to show JSON Data in JQuery Datatables.
Source Code
json-datatable.php
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Show JSON Data in Jquery Datatables</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>
</head>
<body>
<br /><br />
<div class="container">
<h1 align="center">Show JSON Data in Jquery Datatables</h3><br />
<h3 align="center">Employee Database</h3><br />
<table id="data-table" class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Designation</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#data-table').DataTable({
"ajax" : "employee_data.json",
"columns" : [
{ "data" : "name" },
{ "data" : "gender"},
{ "data" : "designation"}
]
});
});
</script>
employee_data.json
{
"data" : [
{
"name": "Michael Bruce",
"gender": "Male",
"designation": "System Architect"
},
{
"name": "Jennifer Winters",
"gender": "Female",
"designation": "Senior Programmer"
},
{
"name": "Donna Fox",
"gender": "Female",
"designation": "Office Manager"
},
{
"name": "Cynthia E. Folmar",
"gender": "Female",
"designation": "Pharmacy technician"
},
{
"name": "Charles E. Drexler",
"gender": "Male",
"designation": "Pamphlet binding worker"
},
{
"name": "Andre F. Morris",
"gender": "Male",
"designation": "Respiratory therapy technician"
},
{
"name": "James P. Baumgartner",
"gender": "Male",
"designation": "Diesel mechanic"
},
{
"name": "Harold E. Welter",
"gender": "Male",
"designation": "Cooling and freezing equipment operator"
},
{
"name": "Antionette J. Ellard",
"gender": "Female",
"designation": "Power plant distributor"
},
{
"name": "Edith C. Hughes",
"gender": "Female",
"designation": "Record clerk"
},
{
"name": "Mary R. Johnson",
"gender": "Female",
"designation": "Direct care worker"
},
{
"name": "Christina R. Belin",
"gender": "Female",
"designation": "Cost engineer"
},
{
"name": "Edith J. Ochoa",
"gender": "Female",
"designation": "Gastroenterologist"
},
{
"name": "Elizbeth R. Thornton",
"gender": "Female",
"designation": "Public relations consultant"
},
{
"name": "Barbara W. Ibarra",
"gender": "Female",
"designation": "Regional geographer"
},
{
"name": "Art D. Steiner",
"gender": "Male",
"designation": "Camp director"
},
{
"name": "Dorothy C. Downs",
"gender": "Female",
"designation": "Conference interpreter"
},
{
"name": "Francisca J. Healy",
"gender": "Female",
"designation": "Stereotyper"
},
{
"name": "Janice J. Luton",
"gender": "Female",
"designation": "Quality control technician"
},
{
"name": "Jeanetta M. Brown",
"gender": "Female",
"designation": "Machine feeder"
},
{
"name": "Susan P. Nazario",
"gender": "Female",
"designation": "Process metallurgical engineer"
},
{
"name": "Antonia K. Vogl",
"gender": "Female",
"designation": "Psychiatrist"
},
{
"name": "Cheryl P. Mahn",
"gender": "Female",
"designation": "Credit manager"
},
{
"name": "Stephen E. Lynn",
"gender": "Male",
"designation": "Golf course architect"
},
{
"name": "Michael M. Rodriguez",
"gender": "Male",
"designation": "Psychologist"
},
{
"name": "Elsie D. Jones",
"gender": "Female",
"designation": "Research psychologist"
},
{
"name": "Jeremy J. Underwood",
"gender": "Male",
"designation": "Commentator"
},
{
"name": "Brenda J. Fowler",
"gender": "Female",
"designation": "Radio equipment installer"
},
{
"name": "Mollie S. Castillo",
"gender": "Female",
"designation": "Information processing worker"
},
{
"name": "Carol T. McDill",
"gender": "Female",
"designation": "Power distributor"
},
{
"name": "Darlene P. Allen",
"gender": "Female",
"designation": "Industrial production manager"
}
]
}
Hi. I like your explanation. I am developing a small project with play, java and mysql. However, i was wondering if i can have a call to my java function that returns a list as json !
ReplyDeleteSomething like:
$(document).ready(function(){
$('#data-table').DataTable({
"ajax" : $.get("/students"),
"columns" : [
{ "data" : "id" },
{ "data" : "name"},
{ "data" : "address"},
{ "data" : "status"}
]
});
});
where /students is route to a getStudents() returning a json.
Thank you in advance.
It works thanks
ReplyDeletehow when i not use data on json???
ReplyDeleteDear,
ReplyDeleteCan i use mysql data in json and how?