Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
277 views

Parse JSON Data Easily in JQuery DataTables

This document discusses how to parse JSON data and display it in a jQuery DataTable. It includes code snippets for the required CDNs, HTML table markup, sample JSON data, and JavaScript code to parse the JSON and populate the DataTable. The JSON data contains blog post titles and URLs. The JavaScript code uses DataTables' ajax option to retrieve the remote JSON file and populate the table. It also includes a custom column rendering function to add hyperlinks to the post URLs.

Uploaded by

Marty
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
277 views

Parse JSON Data Easily in JQuery DataTables

This document discusses how to parse JSON data and display it in a jQuery DataTable. It includes code snippets for the required CDNs, HTML table markup, sample JSON data, and JavaScript code to parse the JSON and populate the DataTable. The JSON data contains blog post titles and URLs. The JavaScript code uses DataTables' ajax option to retrieve the remote JSON file and populate the table. It also includes a custom column rendering function to add hyperlinks to the post URLs.

Uploaded by

Marty
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

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.

You might also like