JSON Data To HTML Table Converter - jQuery jsontotable.js

JSON Data To HTML Table Converter - jQuery jsontotable.js
File Size: 5.56 KB
Views Total: 117
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Work in a field that deals with data from an API? Want to convert that data into an HTML table so it's easier for you or your users to read? Need a quick way to work with JSON data without having to write your own parser code? If you answered yes to any of these questions, then this jQuery plugin is for you.

One of the most common uses for JSON (JavaScript Object Notation) is to share structured data between two applications. In this article, I'll be introducing a fresh new jQuery plugin that easily convert complex JSON data into an HTML table with a single JS call. Let's get started.

See Also:

How to use it:

1. Load the minified version of the jQuery jsontotable.js plugin after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.jsontotable.min.js" ></script>

2. Create a container to hold the HTML table.

<div id="tableContainer"></div>

3. Initialize the plugin on that container and specify the data source that should be converted into a table.

$("#tableContainer").jsonToHtmlTable({
  data : [
    [ "a", "b", "c" ],
    [ "m", "n", "o" ],
    [ "x", "y", "z" ]
  ],
});

4. You can also fetch JSON data from external data sources via AJAX.

$("#tableContainer").jsonToHtmlTable({
  data : '/path/to/your/data/',
  refreshPriod: null, // refetch data from data source
});

5. Assign a unique ID and/or CSS class to the table.

$("#tableContainer").jsonToHtmlTable({
  data : yourData,
  tableCssClass : 'mytable',
  tableId : 'exampleTable',
});

6. Customize the separators between items. Default: ', '.

$("#tableContainer").jsonToHtmlTable({
  data : yourData,
  arraySeperator : ', '
});

7. Determine whether to enable RTL mode. Default: false.

$("#tableContainer").jsonToHtmlTable({
  data : yourData,
  rtl : true,
});

8. Determine whether to enable RTL mode. Default: false.

$("#tableContainer").jsonToHtmlTable({
  data : yourData,
  rtl : true,
});

This awesome jQuery plugin is developed by birddevelper. For more Advanced Usages, please check the demo page or visit the official website.