How to Read JSON Data in jQuery DataTables

Submitted by alpha_luna on Monday, August 1, 2016 - 11:31.

In this tutorial, we are going to learn How to Read JSON Data in jQuery DataTables. In our previous tutorial, displaying JSON Data in PHP using jQuery. Today, we are going to display JSON Data in jQuery DataTables. Using data tables, we are going to separate any JSON Data and no need to use any methods or functions, kindly take a look for this simple tutorial. Read Also: How to Read JSON Data in PHP Read Also: How to Convert MySQL Data Into JSON Format in PHP using PDO

You will Learn:

Constructing JSON File.
Creating simple jQuery script.
Separating JSON Data to DataTables.

Creating Simple Markup - Table

This is our HTML Table, we are going to use the id attribute where we can be filled our JSON Data, take a look the short source code below.

<table id="example_tutorial" class="table table-bordered">
        <thead>
            <tr>
                <th>Post Title</th>
                <th>Post URL</th>
            </tr>
        </thead>
</table>

JSON File

This example JSON File, we are going to use to display in DataTables which was used in my previous tutorial. You can change whatever you want after download the full source code below.

{
        "data": [
        {
                "postID": "1",
                "post_Title": "How to Convert MySQL Data Into JSON Format in PHP using PDO",
                "post_Url": "http://www.sourcecodester.com/tutorials/php/10612/how-convert-mysql-data-json-format-php-using-pdo.html"
        }, {
                "postID": "2",
                "post_Title": "How to Read JSON Data in PHP",
                "post_Url": "http://www.sourcecodester.com/tutorials/php/10610/how-read-json-data-php.html"
        }, {
                "postID": "3",
                "post_Title": "Date and Time of Last Visit",
                "post_Url": "http://www.sourcecodester.com/tutorials/javascript/9469/date-and-time-last-visit.html"
        }, {
                "postID": "4",
                "post_Title": "Digital Clock using jQuery",
                "post_Url": "http://www.sourcecodester.com/tutorials/javascript/10606/digital-clock-using-jquery.html"
        }, {
                "postID": "5",
                "post_Title": "Contact Form with Captcha Confirmation using PDO in PHP",
                "post_Url": "http://www.sourcecodester.com/tutorials/php/10605/contact-form-captcha-confirmation-using-pdo-php.html"
        }, {
                "postID": "6",
                "post_Title": "Color Effect in Text using JavaScript",
                "post_Url": "http://www.sourcecodester.com/tutorials/javascript/10601/color-effect-text-using-javascript.html"
        }, {
                "postID": "7",
                "post_Title": "Bootstrap Wizard Registration using PHP/MySQL",
                "post_Url": "http://www.sourcecodester.com/tutorials/php/10235/how-create-wizard-registration-using-php.html"
        }, {
                "postID": "8",
                "post_Title": "How to Show and Hide Menu",
                "post_Url": "http://www.sourcecodester.com/tutorials/other/10206/how-show-and-hide-menu.html"
        }, {
                "postID": "9",
                "post_Title": "If, Else, Else If Statement using JavaScript",
                "post_Url": "http://www.sourcecodester.com/tutorials/javascript/10239/how-use-if-else-else-if-statement-using-javascript.html"
        }, {
                "postID": "10",
                "post_Title": "Members Information System using PHP/MySQL",
                "post_Url": "http://www.sourcecodester.com/tutorials/php/10586/members-information-system-using-phpmysql.html"
        }, {
                "postID": "11",
                "post_Title": "Confirmation Alert Box using JavaScript",
                "post_Url": "http://www.sourcecodester.com/tutorials/javascript/10590/confirmation-alert-box-using-javascript.html"
        }]
}

JavaScript Source Code

This is our JavaScript code which we are going to separate the JSON Data in DataTables. Kindly take a look the source code below.

<script type="text/javascript">
$(document).ready(function() {
    $('#example_tutorial').DataTable( {
        "ajax": "getposts.json",
                
                "columnDefs": [ {
                        "targets": 1,
                        "data": "post_Url",
                        "render": function(data){
                                return '<a href="'+data+'">view</a>';
                        }
                }],
                
        "columns": [
            
                        { "data": "post_Title" }
        ]
    } );
} );
</script>

Output

Hope that this simple yet useful tutorials that I created may help you to your future projects. Read Also: How to Read JSON Data in PHP Read Also: How to Convert MySQL Data Into JSON Format in PHP using PDO If you are interested in programming, we have an example of programs that may help you even just in small ways. Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Add new comment

472 views