JSON to HTML Table
JSON Data To HTML Table is Example of Lightweight jQuery Plugin for Beginners. Though this is not a datatable, you can modify this plugin and customize it to make your own datatable. This is an example to make an HTML table with JSON data.
Download
Current Version
Version 1.0.0
You can download the latest or current stable version from here (recommended) or download it form master branch (not recommended).
https://github.com/shahnewazshamim/json-to-table/archive/master.zip
Git Clone:
https://github.com/shahnewazshamim/json-to-table.git
Installation
Using Production version JSON-to-Table.min.1.0.0.js
<script src="jQuery-3.2.1.min.js"></script>
Or Development version JSON-to-Table.1.0.0.js
<script src="JSON-to-Table.min.1.0.0.js"></script>
How to use
Just call createTable method in your document ready function with your json data object.
$('your-selector').createTable(data);
Property Definition
Every single value of these properties is similar to CSS property value.
-
borderWidth
Defines to control table and it's all rows and columns border width.
Ex:
borderWidth: '1px' -
borderStyle
Defines to control table and it's all rows and columns border style.
Ex:
borderStyle: 'solid' -
borderColor
Defines to control table and it's all rows and columns border color.
Ex:
borderColor: '#DDDDDD' -
fontFamily
Defines to control table font family.
Ex:
fontFamily: 'Verdana, Helvetica, Arial, FreeSans, sans-serif' -
thBg
Defines to control table header background color.
Ex:
thBg: '#F3F3F3' -
thColor
Defines to control table header text color.
Ex:
thColor: '#0E0E0E' -
thHeight
Defines to control table header height.
Ex:
thHeight: '30px' -
thFontFamily
Defines to control table header font family.
Ex:
thFontFamily: '"Open Sans Condensed", sans-serif' -
thFontSize
Defines to control table header font size.
Ex:
thFontSize: '14px' -
thTextTransform
Defines to control table header text style.
Ex:
thTextTransform: 'capitalize' -
trBg
Defines to control table row background color.
Ex:
trBg: '#FFFFFF' -
trColor
Defines to control table row text color.
Ex:
thColor: '#0E0E0E' -
trHeight
Defines to control table row height.
Ex:
thHeight: '25px' -
trFontFamily
Defines to control table row font family.
Ex:
trFontFamily: '"Open Sans", sans-serif' -
thFontSize
Defines to control table row font size.
Ex:
thFontSize: '13px' -
tdPaddingLeft
Defines to control table column left padding.
Ex:
tdPaddingLeft: '10px' -
tdPaddingRight
Defines to control table column right padding.
Ex:
tdPaddingRight: '10px'
Examples
Using a JSON data from your JS variable.
var data = [ { "id": 1, "first_name": "Alli", "last_name": "Cassey", "email": "[email protected]", "gender": "Female", "ip_address": "129.82.128.62" }, { "id": 2, "first_name": "Clyde", "last_name": "Bromage", "email": "[email protected]", "gender": "Male", "ip_address": "232.45.125.179" }, { "id": 3, "first_name": "Janeczka", "last_name": "Trett", "email": "[email protected]", "gender": "Female", "ip_address": "149.4.116.82" }, { "id": 4, "first_name": "Kristoforo", "last_name": "Duplain", "email": "[email protected]", "gender": "Male", "ip_address": "137.198.100.233" }, { "id": 5, "first_name": "Devonna", "last_name": "Medeway", "email": "[email protected]", "gender": "Female", "ip_address": "136.193.208.118" } ]; $(document).ready(function () { $('#table-2').createTable(data); });External JSON file.
$(document).ready(function () { $.getJSON("sample-data.json", function (data) { $('.table').createTable(data, { // General Style for Table borderWidth: '1px', borderStyle: 'solid', borderColor: '#DDDDDD', fontFamily: 'Verdana, Helvetica, Arial, FreeSans, sans-serif', // Table Header Style thBg: '#F3F3F3', thColor: '#0E0E0E', thHeight: '30px', thFontFamily: '"Open Sans Condensed", sans-serif', thFontSize: '14px', thTextTransform: 'capitalize', // Table Body/Row Style trBg: '#FFFFFF', trColor: '#0E0E0E', trHeight: '25px', trFontFamily: '"Open Sans", sans-serif', trFontSize: '13px', // Table Body's Column Style tdPaddingLeft: '10px', tdPaddingRight: '10px' }); }); });
