
Yet another jQuery based JSON to Table converter that helps you render a dynamic, easy-to-style data table from JSON data.
Alternatives:
Table To JSON Converters:
How to use it:
1. Insert jQuery JavaScript library and the jQuery htmlson.js plugin into the html document.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src="htmlson.js"></script> <!-- Or from CDN --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/src/htmlson.js"></script>
2. Create an empty table element on the page.
<table class="example"></table>
3. Define your own JSON data as these:
var data=[ { "name": "Kitty", "species" : "cat", "foods": { "likes": ["fresh food"], "dislikes": ["stale food"] } }, { "name": "Pupster", "species" : "dog", "foods": { "likes": ["tomatoes", "peas"], "dislikes": ["bread"] } }, { "name": "Tux", "species" : "cat", "foods": "hahah" } ];
4. Convert the JSON data into an HTML table.
var myTable = $('.example').htmlson({ data: data });
5. Customize the table header.
var myTable = $('.example').htmlson({ data: data, headers: { // 1 = column 2 1: 'custom header' } });
6. Enable/disable the debug mode.
var myTable = $('.example').htmlson({ data: data, headers: { // 1 = column 2 1: 'custom header' }, debug: true });
7. Add more data to the table.
myTable.addRow({ "name": "New Kitty", "species" : "cat", "foods": { "likes": ["old food"], "dislikes": ["new food"] } });
8. Remove a record from the table.
// 0 = first row myTable.removeRow(0);
About Author:
Authors: Adalen Vladi and Redjan Ymeraj
Website: https://adalenv.github.io/htmlson.js/
This awesome jQuery plugin is developed by adalenv. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 07.03.2018
- Source