Read 1 : Convert MySQL Data in JSON Format
Read 2 : How to Read/Display JSON Data using jQuery in HTML
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, try this and share it if you liked it 🙂