This time I will share jQuery Plugin and tutorial about Convert JSON Data To Table – jQuery JSON To Table Plugin, hope it will help you in programming stack.
A lightweight jQuery JSON to Table plugin which lets you generate a highly customizable html table from local JSON objects or external JSON data files.
How to use it:
1. Import the latest version of JQuery library and the jQuery JSON To Table plugin’s script into the document.
1 |
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script> |
2 |
<script src="JSON-to-Table.min.1.0.0.js"></script> |
2. Create an empty container to place the generated html table.
3. The example JSON data.
04 |
"last_name": "Cassey", |
05 |
"email": "acassey0@list-manage.com", |
07 |
"ip_address": "129.82.128.62" |
10 |
"first_name": "Clyde", |
11 |
"last_name": "Bromage", |
12 |
"email": "cbromage1@bbb.org", |
14 |
"ip_address": "232.45.125.179" |
17 |
"first_name": "Janeczka", |
19 |
"email": "jtrett2@vistaprint.com", |
21 |
"ip_address": "149.4.116.82" |
4. Convert the JSON data into an html table.
1 |
$('#demo').createTable(data); |
5. Customize the styles of the html table in the JavaScript.
01 |
$('#demo').createTable(data,{ |
04 |
borderColor: '#DDDDDD', |
05 |
fontFamily: 'Verdana, Helvetica, Arial, FreeSans, sans-serif', |
10 |
thFontFamily: 'Verdana, Helvetica, Arial, FreeSans, sans-serif', |
12 |
thTextTransform: 'capitalize', |
17 |
trFontFamily: 'Verdana, Helvetica, Arial, FreeSans, sans-serif', |
20 |
tdPaddingLeft: '10px', |
21 |
tdPaddingRight: '10px' |
This awesome jQuery plugin is developed by shahnewazshamim. For more Advanced Usages, please check the demo page or visit the official website.
