Parse JSON Data easily in

jQuery DataTables
Parsing JSON in Simple HTML Table using jQuery's $.getJSON() and $.ajax(), now here in this tutorial
we have datatables so no need to use jQuery's methods and functions, but we need to use here Ajax
data source with remote JSON file to do parsing and yes we need simple html table, in datatables it's
very easy to parse any JSON Data and you don't need to do any special initialization, so just take a
look at this simple yet useful tutorial.

Required CDN's
following are the required CDN's i have used here for the datatables included with bootstrap
design, just add css link within your head tag and js link just below the closing body tag.

<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>

Simpel HTML Markup/Table

this is our HTML Markup within Bootstrap's div tag container the HTML Table will be filled
with JSON Data, which we are going to parsed with custom javascript code. have a look.

<div class="container">

<table id="example" class="table table-bordered">

<thead>
<tr>
<th>Post Title</th>
<th>Post URL</th>
</tr>
</thead>
</table>
</div>

JSON File
friends i have used here the same JSON file which was used in my previous tutorial, change
it as your requirement.

{
"data": [
{
"postID": "1",
"postTitle": "Simple jQuery Add, Update, Delete with PHP and MySQL",
"postUrl": "http://goo.gl/IL6NTr"
}, {
"postID": "2",
"postTitle": "15 Free Bootstrap Admin Themes Demo and Download",
"postUrl": "http://goo.gl/1dBwEy"
}, {
"postID": "3",
"postTitle": "Easy Ajax Image Upload with jQuery, PHP",
"postUrl": "http://goo.gl/jXZ6LY"
}, {
"postID": "4",
"postTitle": "How to Send HTML Format eMails in PHP using PHPMailer",
"postUrl": "http://goo.gl/kQrzJP"
}, {
"postID": "5",
"postTitle": "Ajax Bootstrap Signup Form with jQuery PHP and MySQL",
"postUrl": "http://goo.gl/yxKrha"
}, {
"postID": "6",
"postTitle": "Submit PHP Form without Page Refresh using jQuery, Ajax",
"postUrl": "http://goo.gl/14vlBe"
}, {
"postID": "7",
"postTitle": "How to Convert MySQL Rows into JSON Format in PHP",
"postUrl": "http://goo.gl/qgOiwB"
 }, {
"postID": "8",
"postTitle": "Designing Bootstrap Signup Form with jQuery Validation",
"postUrl": "http://goo.gl/nECERc"
}, {
"postID": "9",
"postTitle": "Upload, Insert, Update, Delete an Image using PHP MySQL",
"postUrl": "http://goo.gl/HRJrDD"
}, {
"postID": "10",
"postTitle": "Login Registration with Email Verification, Forgot Password
using PHP",
"postUrl": "http://goo.gl/O9FKN1"
}]
}

JavaScript Code
this is our main js code which parse JSON Data in Datatables. ajax: need's json
file, columnDefs is just a custom column definition well i'm going to add hyperlink into
Datatables column. cause we have url in our json file, which need's customized column.

<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "getposts.json",

"columnDefs": [ {
"targets": 1,
"data": "postUrl",
"render": function(data){
return '<a href="'+data+'">view</a>';
}
}],

"columns": [
 { "data": "postTitle" },
{ "data": "postUrl" }
]
} );
} );
</script>

if you have simpel data which need's no special customization then you can use the
following code instead above.

$(document).ready(function() {
$('#example').DataTable( {
"ajax": "getposts.json",
"columns": [
{ "data": "postTitle" },
{ "data": "postUrl" }
]
} );
} );

that's it.