Parse JSON Data easily in jQuery DataTables

In today’s tutorial i’m gonna tell you How to Parse JSON Data in jQuery Datatables, In our’s previous tutorial we saw 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.

Live Demo

Download Script

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 🙂