🕷️ Crawler Inspector

[](https://www.kodingmadesimple.com/) - [Home](https://www.kodingmadesimple.com/) - [HTML](https://www.kodingmadesimple.com/search/label/html) - [CSS](https://www.kodingmadesimple.com/search/label/css) - [Bootstrap](https://www.kodingmadesimple.com/search/label/Bootstrap) - [PHP](https://www.kodingmadesimple.com/search/label/php) - [CodeIgniter](https://www.kodingmadesimple.com/search/label/CodeIgniter) - [jQuery](https://www.kodingmadesimple.com/search/label/jQuery) - [Softwares](https://www.kodingmadesimple.com/search/label/Software) - [Latest Reviews](https://www.kodingmadesimple.com/search/label/Reviews) # How to Convert JSON Data to HTML Table using jQuery DataTables Plug-in Posted by [Valli](https://www.blogger.com/profile/07915599290396253371 "author profile") On 12/11/2017 **Hi, this time I have come up with a jquery basics tutorial which discusses about how to convert json to html table.** In simple terms we are going to use jquery to display data from a json file in neat table format with added pagination and search options to it. To make our life easier there is an excellent jquery plug-in called ‘DataTables’ which we will use for this task. DataTables is a flexible jquery tool which adds up advanced interaction controls to any HTML table. Using this we can easily add pagination, instant search or multi-column ordering to the html table. Moreover it supports all modern day data sources like DOM, JavaScript, Ajax and server-side processing.  ## Convert JSON Data to HTML Table using jQuery As an example let’s take the below sample json file which contains an array of objects and display it in html table using datatables. **Don't Miss:** [How to Create Responsive Carousel Image Slider](http://www.kodingmadesimple.com/2015/01/twitter-bootstrap-carousel-tutorial-examples.html) **Also Read:** [How to Create Image Lightbox Effect with jQuery](http://www.kodingmadesimple.com/2014/09/image-lightbox-effect-with-jquery.html) #### empdata.json ``` { "data": [ { "name": "Garrett Winters", "designation": "Accountant", "salary": "$170,750", "joining_date": "2011/07/25", "office": "Tokyo", "extension": "8422" }, { "name": "Brielle Williamson", "designation": "Integration Specialist", "salary": "$372,000", "joining_date": "2012/12/02", "office": "New York", "extension": "4804" }, { "name": "Ashton Cox", "designation": "Junior Technical Author", "salary": "$86,000", "joining_date": "2009/01/12", "office": "San Francisco", "extension": "1562" }, { "name": "Airi Satou", "designation": "Accountant", "salary": "$162,700", "joining_date": "2008/11/28", "office": "Tokyo", "extension": "5407" }, { "name": "Caesar Vance", "designation": "Pre-Sales Support", "salary": "$106,450", "joining_date": "2011/12/12", "office": "New York", "extension": "8330" }, { "name": "Shad Decker", "designation": "Regional Director", "salary": "$183,000", "joining_date": "2008/11/13", "office": "Edinburgh", "extension": "6373" }, { "name": "Cedric Kelly", "designation": "Senior Javascript Developer", "salary": "$433,060", "joining_date": "2012/03/29", "office": "Edinburgh", "extension": "6224" }, { "name": "Haley Kennedy", "designation": "Senior Marketing Designer", "salary": "$313,500", "joining_date": "2012/12/18", "office": "London", "extension": "3597" }, { "name": "Colleen Hurst", "designation": "Javascript Developer", "salary": "$205,500", "joining_date": "2009/09/15", "office": "San Francisco", "extension": "2360" }, { "name": "Dai Rios", "designation": "Personnel Lead", "salary": "$217,500", "joining_date": "2012/09/26", "office": "Edinburgh", "extension": "2290" }, { "name": "Herrod Chandler", "designation": "Sales Assistant", "salary": "$137,500", "joining_date": "2012/08/06", "office": "San Francisco", "extension": "9608" }, { "name": "Rhona Davidson", "designation": "Integration Specialist", "salary": "$327,900", "joining_date": "2010/10/14", "office": "Tokyo", "extension": "6200" }, { "name": "Sonya Frost", "designation": "Software Engineer", "salary": "$103,600", "joining_date": "2008/12/13", "office": "Edinburgh", "extension": "1667" }, { "name": "Jena Gaines", "designation": "Office Manager", "salary": "$90,560", "joining_date": "2008/12/19", "office": "London", "extension": "3814" }, { "name": "Quinn Flynn", "designation": "Support Lead", "salary": "$342,000", "joining_date": "2013/03/03", "office": "Edinburgh", "extension": "9497" } ] } ``` Now let's see about converting this json data to html table. **Step 1:** First you need the datatables plug-in in place to start working. So [download datatables plug-in here](https://www.datatables.net/download/) and extract its contents and move ‘media’ directory to your working folder. **Step 2:** Having the required datatables files in place, now we have to link them to the html file. Create a file ‘index.html’ and link the datatables ‘css’ and ‘js’ files like this. ``` <html> <head> <!-- link datatables css --> <link rel="stylesheet" type="text/css" href="/path/to/jquery.dataTables.css"> </head> <body> ... <!-- load jquery --> <script type="text/javascript" src="/path/to/jquery-1.10.2.js"></script> <!-- load datatables js library --> <script type="text/javascript" src="/path/to/jquery.dataTables.js"></script> </body> </html> ``` Remember to include the jquery library before datatables ‘js’ file as the plug in is built over jquery. **Step 3:** Now it's time to create a html table structure which we will map to our json data source later. We should determine what are the columns we want to appear on the table and create the table's header and footer with appropriate column names. ``` <table id="empTable" class="display" width="100%" cellspacing="0"> <thead> <tr> <th>Name</th> <th>Designation</th> <th>Office</th> <th>Extension</th> <th>Joining Date</th> <th>Salary</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Designation</th> <th>Office</th> <th>Extension</th> <th>Joining Date</th> <th>Salary</th> </tr> </tfoot> </table> ``` Using the css class ‘.display’ will [create the table with alternative striped rows](http://www.kodingmadesimple.com/2015/03/twitter-bootstrap-table-styles-tutorial-examples.html) (zebra cross style). **Step 4:** Finally we should populate the html table with the data from json source by mapping to the right table columns. ``` <script type="text/javascript"> $( document ).ready(function() { $('#empTable').dataTable({ "ajax": "empdata.json", "columns": [ {"data": "name"}, {"data": "designation"}, {"data": "office"}, {"data": "extension"}, {"data": "joining_date"}, {"data": "salary"} ] }); }); </script> ``` \- The `dataTable()` method will initialize the datatables. Its behavior can be controlled by passing parameters for various options and we have used two options in the above code. (I planned to keep the code as simple as possible and used only the basic options required but you can try out more). \- The `ajax` option will load the data from the given ajax source. Here in our case it’s the path to the json file. \- The `columns` option will map the table columns to the data source keys. Now run the index.html file and you can see a nicely designed html table with added enhancements like instant-search at the top and [pagination links](http://www.kodingmadesimple.com/2015/04/php-codeigniter-pagination-twitter-bootstrap-styles.html) at the bottom. You can also sort the table columns like you prefer. | | |---| |  | | JSON Data Displayed in HTML Table using jQuery Datatables Plug-in | ### Complete Code for index.html ``` <!DOCTYPE html> <html> <head> <title>Display JSON File Data in Datatables | Example</title> <!-- link datatables css --> <link rel="stylesheet" type="text/css" href="/path/to/jquery.dataTables.css"> </head> <body> <table id="empTable" class="display" width="100%" cellspacing="0"> <thead> <tr> <th>Name</th> <th>Designation</th> <th>Office</th> <th>Extension</th> <th>Joining Date</th> <th>Salary</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Designation</th> <th>Office</th> <th>Extension</th> <th>Joining Date</th> <th>Salary</th> </tr> </tfoot> </table> <!-- load jquery --> <script type="text/javascript" src="/path/to/jquery-1.10.2.js"></script> <!-- load datatables js library --> <script type="text/javascript" src="/path/to/jquery.dataTables.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#empTable').dataTable({ "ajax": "empdata.json", "columns": [ {"data": "name"}, {"data": "designation"}, {"data": "office"}, {"data": "extension"}, {"data": "joining_date"}, {"data": "salary"} ] }); }); </script> </body> </html> ``` *I hope this basic jquery tutorial gives you a good idea about converting json data to html table using datatables jquery plugin.* **Read Also:** - [How to Insert JSON into MySQL Database using PHP](http://www.kodingmadesimple.com/2014/12/how-to-insert-json-data-into-mysql-php.html) - [How to Convert MySQL Data to JSON File using PHP](http://www.kodingmadesimple.com/2015/01/convert-mysql-to-json-using-php.html) As said earlier it's a highly flexible tool and provides wide range of options to completely customize the looks and behavior of the html tables to meet your requirements. Don't hesitate to try out :-) [Tweet](https://twitter.com/share) ## **Related Posts** [ Get JSON from URL in PHP](https://www.kodingmadesimple.com/2016/02/get-json-from-url-in-php.html) [ How to Read and Parse JSON String in jQuery and Display in HTML Table](https://www.kodingmadesimple.com/2015/05/read-parse-json-string-jquery-html-table.html) [ How to Add Select All Options to jQuery Select2 Plug-in](https://www.kodingmadesimple.com/2018/04/select-all-options-jquery-select2.html) [ How to Disable Mouse Right Click using jQuery](https://www.kodingmadesimple.com/2018/04/disable-mouse-right-click-jquery.html) [ How to Add Images to Dropdown List using jQuery](https://www.kodingmadesimple.com/2018/03/add-images-to-dropdown-list-jquery.html) [ How to Print Contents of a Div using JavaScript](https://www.kodingmadesimple.com/2018/01/print-contents-of-div-javascript.html) #### 17 comments: 1.  [EJILES](https://www.blogger.com/profile/06741162036779398470) [December 25, 2015 1:51 AM](https://www.kodingmadesimple.com/2015/07/convert-json-data-html-table-jquery-datatables-plugin.html?showComment=1450988486497#c4493367093348321956) I did a cut-n-paste. all files are where they should be. empdata.json?\_=1450987177810 Failed to load resource: the server responded with a status of 404 (Not Found)? what is it looking for? [Reply]()[Delete](https://www.blogger.com/comment/delete/4505192626920795935/4493367093348321956) [Replies]() 2.  [PCpeep](https://www.blogger.com/profile/05194545657738599958) [March 17, 2016 7:31 PM](https://www.kodingmadesimple.com/2015/07/convert-json-data-html-table-jquery-datatables-plugin.html?showComment=1458223298648#c1581519012840573405) Thanks!Good article!Clarified somethings and was able to get it working\! [Reply]()[Delete](https://www.blogger.com/comment/delete/4505192626920795935/1581519012840573405) [Replies]() 3.  [Unknown](https://www.blogger.com/profile/14401042077822596331) [March 19, 2016 11:37 PM](https://www.kodingmadesimple.com/2015/07/convert-json-data-html-table-jquery-datatables-plugin.html?showComment=1458410847259#c1160482639600752769) Hi I have followed the steps closely and all works fine however when I use my own data json file it's not displaying. The error is can't read json file but it's all validated correctly. Any ideas?? [Reply]()[Delete](https://www.blogger.com/comment/delete/4505192626920795935/1160482639600752769) [Replies]() 4.  [Unknown](https://www.blogger.com/profile/14401042077822596331) [March 20, 2016 2:35 AM](https://www.kodingmadesimple.com/2015/07/convert-json-data-html-table-jquery-datatables-plugin.html?showComment=1458421532987#c3693274151520044000) It seems that for some reason I can't change the object name of data to something else what am I doing wrong?? cheers [Reply]()[Delete](https://www.blogger.com/comment/delete/4505192626920795935/3693274151520044000) [Replies]() 5.  [Unknown](https://www.blogger.com/profile/09058747712697085118) [June 10, 2016 11:12 PM](https://www.kodingmadesimple.com/2015/07/convert-json-data-html-table-jquery-datatables-plugin.html?showComment=1465580525422#c2269657972593010622) SHould it be a json file or can the input be a json object as well ? [Reply]()[Delete](https://www.blogger.com/comment/delete/4505192626920795935/2269657972593010622) [Replies]() 6.  [Tigere](https://www.blogger.com/profile/18409997046579621379) [June 29, 2016 7:06 PM](https://www.kodingmadesimple.com/2015/07/convert-json-data-html-table-jquery-datatables-plugin.html?showComment=1467207370936#c1141951015227618411) What about url json data? Instead of that static empdata.json? [Reply]()[Delete](https://www.blogger.com/comment/delete/4505192626920795935/1141951015227618411) [Replies]() 7.  [themainstreamseer](https://www.blogger.com/profile/15757617943437109954) [December 02, 2016 11:59 PM](https://www.kodingmadesimple.com/2015/07/convert-json-data-html-table-jquery-datatables-plugin.html?showComment=1480703348410#c602941602103581732) Valli, thank you for this excellent resource! I managed to get your example working but I cannot seem to replicate this with my data. I get a "Loading..." message in my table. When I click on the number of records selector in the top left of the webpage and change the number of items to be displayed, the message in the table changes to "No data available in table". Any ideas as to what may be going on? When I look at the Browser Console in Firefox, there are 3 alerts: 1\) Use of Mutation Events is deprecated. Use MutationObserver instead 2\) not well-formed (this refers to the json file but my format is exactly the same as empdata.json) 3\) TypeError: aData is undefined Any help would be gratefully accepted. Thanks, Venky [Reply]()[Delete](https://www.blogger.com/comment/delete/4505192626920795935/602941602103581732) [Replies]() 8.  [themainstreamseer](https://www.blogger.com/profile/15757617943437109954) [December 03, 2016 4:56 PM](https://www.kodingmadesimple.com/2015/07/convert-json-data-html-table-jquery-datatables-plugin.html?showComment=1480764395468#c2022215496529600510) Hi Valli, I wanted to let you know that I managed to get my table to display correctly. Thank you for your help! - Venky [Reply]()[Delete](https://www.blogger.com/comment/delete/4505192626920795935/2022215496529600510) [Replies]() 9.  [Richa](https://www.blogger.com/profile/03052309361674396499) [April 26, 2017 2:08 PM](https://www.kodingmadesimple.com/2015/07/convert-json-data-html-table-jquery-datatables-plugin.html?showComment=1493195890081#c5281417953278696979) We followed all the steps but we are not able to load the json data in the html [Reply]()[Delete](https://www.blogger.com/comment/delete/4505192626920795935/5281417953278696979) [Replies]() 10.  [Richa](https://www.blogger.com/profile/03052309361674396499) [April 26, 2017 2:08 PM](https://www.kodingmadesimple.com/2015/07/convert-json-data-html-table-jquery-datatables-plugin.html?showComment=1493195938500#c8376151223654293779) We followed the steps but we are not able to load the json file in html table, can u pls help. [Reply]()[Delete](https://www.blogger.com/comment/delete/4505192626920795935/8376151223654293779) [Replies]() [Add comment]() [Load more...]() [Newer Post](https://www.kodingmadesimple.com/2015/05/read-parse-json-string-jquery-html-table.html "Newer Post") [Older Post](https://www.kodingmadesimple.com/2015/04/validate-json-string-php.html "Older Post") [Home](https://www.kodingmadesimple.com/) ## Contact Form ## - [How to Install Laravel 5.6 on Windows using Composer](http://www.kodingmadesimple.com/2018/06/install-laravel-windows-composer.html) - [How to Create and Download CSV File in PHP](http://www.kodingmadesimple.com/2018/06/create-download-csv-file-php.html) - [How to use PHP PREG MATCH function to validate Form Input](http://www.kodingmadesimple.com/2014/04/use-php-preg-match-function-for-form-validation.html) - [How to Secure Passwords in PHP and Store in Database](http://www.kodingmadesimple.com/2018/06/secure-passwords-php.html) - [How to Install Composer on Windows with XAMPP](http://www.kodingmadesimple.com/2018/05/install-composer-windows-xampp.html) ## Subscribe - [](https://www.facebook.com/pages/Kodingmadesimple-blog/416122768519525) - [](https://twitter.com/kodingmdsimple) - [](https://plus.google.com/101336432104771054127) - [](https://feeds.feedburner.com/Kodingmadesimple) - [](https://pinterest.com/kodingmdsimple) ## You May Also Like ## Like Us on Facebook ## Categories - [AJAX](https://www.kodingmadesimple.com/search/label/AJAX) - [API](https://www.kodingmadesimple.com/search/label/API) - [Bootstrap](https://www.kodingmadesimple.com/search/label/Bootstrap) - [CSV](https://www.kodingmadesimple.com/search/label/CSV) - [CodeIgniter](https://www.kodingmadesimple.com/search/label/CodeIgniter) - [Font Awesome](https://www.kodingmadesimple.com/search/label/Font%20Awesome) - [JavaScript](https://www.kodingmadesimple.com/search/label/JavaScript) - [MySQL](https://www.kodingmadesimple.com/search/label/MySQL) - [PDF](https://www.kodingmadesimple.com/search/label/PDF) - [XML](https://www.kodingmadesimple.com/search/label/XML) - [css](https://www.kodingmadesimple.com/search/label/css) - [html](https://www.kodingmadesimple.com/search/label/html) - [jQuery](https://www.kodingmadesimple.com/search/label/jQuery) - [jQuery Plugin](https://www.kodingmadesimple.com/search/label/jQuery%20Plugin) - [json](https://www.kodingmadesimple.com/search/label/json) - [php](https://www.kodingmadesimple.com/search/label/php) KodingMadeSimple © 2013-2018 \| [About](https://www.kodingmadesimple.com/p/about.html) \| [Services](https://www.kodingmadesimple.com/p/services.html) \| [Disclaimer](https://www.kodingmadesimple.com/p/disclaimer.html) \| [Privacy Policy](https://www.kodingmadesimple.com/p/privacy-policy.html) \| [Sitemap](https://www.kodingmadesimple.com/p/sitemap.html) \| [Contact](https://www.kodingmadesimple.com/p/contact.html) Affiliate Disclosure: This website is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to amazon(.com, .in etc) and any other website that may be affiliated with Amazon Service LLC Associates Program. Kodingmadesimple.com uses affiliate links to online merchants and receives compensation for referred sales of some or all mentioned products but does not affect prices of the product. All prices displayed on this site are subject to change without notice. Although we do our best to keep all links up to date and valid on a daily basis, we cannot guarantee the accuracy of links and special offers displayed. Powered by [Blogger](https://www.blogger.com/) [](http://www.dmca.com/Protection/Status.aspx?ID=ede8ff8a-7f5c-45a4-8f5f-7e97fb8e886a&refurl=https://www.kodingmadesimple.com/2015/07/convert-json-data-html-table-jquery-datatables-plugin.html "DMCA.com Protection Status")

**Hi, this time I have come up with a jquery basics tutorial which discusses about how to convert json to html table.** In simple terms we are going to use jquery to display data from a json file in neat table format with added pagination and search options to it. To make our life easier there is an excellent jquery plug-in called ‘DataTables’ which we will use for this task. DataTables is a flexible jquery tool which adds up advanced interaction controls to any HTML table. Using this we can easily add pagination, instant search or multi-column ordering to the html table. Moreover it supports all modern day data sources like DOM, JavaScript, Ajax and server-side processing. ## Convert JSON Data to HTML Table using jQuery As an example let’s take the below sample json file which contains an array of objects and display it in html table using datatables. **Don't Miss:** [How to Create Responsive Carousel Image Slider](http://www.kodingmadesimple.com/2015/01/twitter-bootstrap-carousel-tutorial-examples.html) **Also Read:** [How to Create Image Lightbox Effect with jQuery](http://www.kodingmadesimple.com/2014/09/image-lightbox-effect-with-jquery.html) #### empdata.json ``` { "data": [ { "name": "Garrett Winters", "designation": "Accountant", "salary": "$170,750", "joining_date": "2011/07/25", "office": "Tokyo", "extension": "8422" }, { "name": "Brielle Williamson", "designation": "Integration Specialist", "salary": "$372,000", "joining_date": "2012/12/02", "office": "New York", "extension": "4804" }, { "name": "Ashton Cox", "designation": "Junior Technical Author", "salary": "$86,000", "joining_date": "2009/01/12", "office": "San Francisco", "extension": "1562" }, { "name": "Airi Satou", "designation": "Accountant", "salary": "$162,700", "joining_date": "2008/11/28", "office": "Tokyo", "extension": "5407" }, { "name": "Caesar Vance", "designation": "Pre-Sales Support", "salary": "$106,450", "joining_date": "2011/12/12", "office": "New York", "extension": "8330" }, { "name": "Shad Decker", "designation": "Regional Director", "salary": "$183,000", "joining_date": "2008/11/13", "office": "Edinburgh", "extension": "6373" }, { "name": "Cedric Kelly", "designation": "Senior Javascript Developer", "salary": "$433,060", "joining_date": "2012/03/29", "office": "Edinburgh", "extension": "6224" }, { "name": "Haley Kennedy", "designation": "Senior Marketing Designer", "salary": "$313,500", "joining_date": "2012/12/18", "office": "London", "extension": "3597" }, { "name": "Colleen Hurst", "designation": "Javascript Developer", "salary": "$205,500", "joining_date": "2009/09/15", "office": "San Francisco", "extension": "2360" }, { "name": "Dai Rios", "designation": "Personnel Lead", "salary": "$217,500", "joining_date": "2012/09/26", "office": "Edinburgh", "extension": "2290" }, { "name": "Herrod Chandler", "designation": "Sales Assistant", "salary": "$137,500", "joining_date": "2012/08/06", "office": "San Francisco", "extension": "9608" }, { "name": "Rhona Davidson", "designation": "Integration Specialist", "salary": "$327,900", "joining_date": "2010/10/14", "office": "Tokyo", "extension": "6200" }, { "name": "Sonya Frost", "designation": "Software Engineer", "salary": "$103,600", "joining_date": "2008/12/13", "office": "Edinburgh", "extension": "1667" }, { "name": "Jena Gaines", "designation": "Office Manager", "salary": "$90,560", "joining_date": "2008/12/19", "office": "London", "extension": "3814" }, { "name": "Quinn Flynn", "designation": "Support Lead", "salary": "$342,000", "joining_date": "2013/03/03", "office": "Edinburgh", "extension": "9497" } ] } ``` Now let's see about converting this json data to html table. **Step 1:** First you need the datatables plug-in in place to start working. So [download datatables plug-in here](https://www.datatables.net/download/) and extract its contents and move ‘media’ directory to your working folder. **Step 2:** Having the required datatables files in place, now we have to link them to the html file. Create a file ‘index.html’ and link the datatables ‘css’ and ‘js’ files like this. ``` <html> <head> <!-- link datatables css --> <link rel="stylesheet" type="text/css" href="/path/to/jquery.dataTables.css"> </head> <body> ... <!-- load jquery --> <script type="text/javascript" src="/path/to/jquery-1.10.2.js"></script> <!-- load datatables js library --> <script type="text/javascript" src="/path/to/jquery.dataTables.js"></script> </body> </html> ``` Remember to include the jquery library before datatables ‘js’ file as the plug in is built over jquery. **Step 3:** Now it's time to create a html table structure which we will map to our json data source later. We should determine what are the columns we want to appear on the table and create the table's header and footer with appropriate column names. ``` <table id="empTable" class="display" width="100%" cellspacing="0"> <thead> <tr> <th>Name</th> <th>Designation</th> <th>Office</th> <th>Extension</th> <th>Joining Date</th> <th>Salary</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Designation</th> <th>Office</th> <th>Extension</th> <th>Joining Date</th> <th>Salary</th> </tr> </tfoot> </table> ``` Using the css class ‘.display’ will [create the table with alternative striped rows](http://www.kodingmadesimple.com/2015/03/twitter-bootstrap-table-styles-tutorial-examples.html) (zebra cross style). **Step 4:** Finally we should populate the html table with the data from json source by mapping to the right table columns. ``` <script type="text/javascript"> $( document ).ready(function() { $('#empTable').dataTable({ "ajax": "empdata.json", "columns": [ {"data": "name"}, {"data": "designation"}, {"data": "office"}, {"data": "extension"}, {"data": "joining_date"}, {"data": "salary"} ] }); }); </script> ``` \- The `dataTable()` method will initialize the datatables. Its behavior can be controlled by passing parameters for various options and we have used two options in the above code. (I planned to keep the code as simple as possible and used only the basic options required but you can try out more). \- The `ajax` option will load the data from the given ajax source. Here in our case it’s the path to the json file. \- The `columns` option will map the table columns to the data source keys. Now run the index.html file and you can see a nicely designed html table with added enhancements like instant-search at the top and [pagination links](http://www.kodingmadesimple.com/2015/04/php-codeigniter-pagination-twitter-bootstrap-styles.html) at the bottom. You can also sort the table columns like you prefer. | | |---| |  | | JSON Data Displayed in HTML Table using jQuery Datatables Plug-in | ### Complete Code for index.html ``` <!DOCTYPE html> <html> <head> <title>Display JSON File Data in Datatables | Example</title> <!-- link datatables css --> <link rel="stylesheet" type="text/css" href="/path/to/jquery.dataTables.css"> </head> <body> <table id="empTable" class="display" width="100%" cellspacing="0"> <thead> <tr> <th>Name</th> <th>Designation</th> <th>Office</th> <th>Extension</th> <th>Joining Date</th> <th>Salary</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Designation</th> <th>Office</th> <th>Extension</th> <th>Joining Date</th> <th>Salary</th> </tr> </tfoot> </table> <!-- load jquery --> <script type="text/javascript" src="/path/to/jquery-1.10.2.js"></script> <!-- load datatables js library --> <script type="text/javascript" src="/path/to/jquery.dataTables.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#empTable').dataTable({ "ajax": "empdata.json", "columns": [ {"data": "name"}, {"data": "designation"}, {"data": "office"}, {"data": "extension"}, {"data": "joining_date"}, {"data": "salary"} ] }); }); </script> </body> </html> ``` *I hope this basic jquery tutorial gives you a good idea about converting json data to html table using datatables jquery plugin.* **Read Also:** - [How to Insert JSON into MySQL Database using PHP](http://www.kodingmadesimple.com/2014/12/how-to-insert-json-data-into-mysql-php.html) - [How to Convert MySQL Data to JSON File using PHP](http://www.kodingmadesimple.com/2015/01/convert-mysql-to-json-using-php.html) As said earlier it's a highly flexible tool and provides wide range of options to completely customize the looks and behavior of the html tables to meet your requirements. Don't hesitate to try out :-)