(by AXDS)

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

Example: https://jsfiddle.net/kvndLfn8/

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

HTML:

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

Script:

var tableId = "tableID";
var targetElement = "#examplePlace";
$(targetElement).Create_AXDS_Table({
"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.