AXDS Plugin: JSON to styled jQuery Datatable

(by AXDS)

Useful for quick data visualisation. Converts a JSON object into a styled filterable/sortable table. Also uses Bootstrap and jQuery Datatable libraries.


The plugin, once called on a target location, requires a table ID and an object of data in order to work.


<div id="examplePlace"></div>


var tableId = "tableID";
var targetElement = "#examplePlace";
"tableId": tableId,
"data": {
"tableColumnHeaders": tableColumnHeaders,
"tableContentsValues": tableContentsValues
"options": tableOptions

The data and objects are formatted as below:

The tableData is split into the header and the values to populate the rows. The id inside the headers is linked to the key of the values. For example: The column ‘fstName’ will be populated with any keys with ‘fstName’.

 var tableColumnHeaders = [{
"id": "fstName",
"text": "First Name"
}, {
"id": "lstName",
"text": "Last Name"
}, {
"id": "mobile",
"text": "Mobile Number"
}, {
"id": "dob",
"text": "Date of Birth"

var tableContentsValues = [{
"fstName": "Wade",
"lstName": "Wilson",
"mobile": "07567 567 432",
"dob": "01/01/1985",
}, {
"fstName": "Peter",
"lstName": "Parker",
"mobile": "07594 567 890",
"dob": "01/01/1995",
}, {
"fstName": "Fred",
"lstName": "Flintstone",
"dob": "01/01/1965",
}, {
"fstName": "Tony",
"lstName": "Stark",
"mobile": "01345 987 234",
"dob": "01/01/1975",

The tableOptions is for styling the table. This is pretty self explanatory.

var tableOptions = [{
"tableBordered": true,
"tableStriped": true,
"responsive": true,
"cellspacing": 0,
"noWrap": true,
"width": "100%",
"rowStyling": {
"fontStyle": "italic",
"color": "red"
"tableStyling": {
"textAlign": "center",
"color": "blue"

This will produce a styled table with the given ID in the target location. This table and ID can be used with the jQuery Datatable library to produce a filterable/sortable table.