diff --git a/Example/Example parse function.html b/Example/Example parse function.html new file mode 100644 index 0000000..5c3cec3 --- /dev/null +++ b/Example/Example parse function.html @@ -0,0 +1,127 @@ + + + + + JSON-to-Table parser example + + + + +

JSON Data To HTML Table - An Example of Lightweight jQuery Plugin for Beginners

+

Custom parse function Example

+
+ + + + + + \ No newline at end of file diff --git a/Example/example.html b/Example/Example.html similarity index 71% rename from Example/example.html rename to Example/Example.html index 5419ebf..653232a 100644 --- a/Example/example.html +++ b/Example/Example.html @@ -5,8 +5,6 @@ JSON Data To HTML Table - jQuery Plugin - - +

JSON Data To HTML Table - An Example of Lightweight jQuery Plugin for Beginners

-

External JSON data file Example

-

JSON Object variable Example

-
- + +
- // 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' - }); - }); + diff --git a/Example/External JSON Example.html b/Example/External JSON Example.html new file mode 100644 index 0000000..e286a1a --- /dev/null +++ b/Example/External JSON Example.html @@ -0,0 +1,76 @@ + + + + + JSON Data To HTML Table - jQuery Plugin + + + + +

JSON Data To HTML Table - An Example of Lightweight jQuery Plugin for Beginners

+

External JSON data file Example

+

⚠ Must run vai web server. CORS policy won't allow to load data locally.

+
+ + + + + + \ No newline at end of file diff --git a/JSON-to-Table-1.0.0.js b/JSON-to-Table-1.0.0.js deleted file mode 100644 index 2b9adab..0000000 --- a/JSON-to-Table-1.0.0.js +++ /dev/null @@ -1,157 +0,0 @@ -(function ($) { - - $.fn.createTable = function (data, options) { - - var element = this; - var settings = $.extend({}, $.fn.createTable.defaults, options); - var selector; - - if (element[0].className !== undefined) { - var split = element[0].className.split(' '); - selector = '.' + split.join('.') + ' '; - } else if (element[0].id !== undefined) { - selector = '#' + element[0].id + ' '; - } - - var table = ''; - - table += ''; - table += $.fn.createTable.parseTableData(data, true); - table += ''; - table += ''; - table += $.fn.createTable.parseTableData(data, false); - table += ''; - table += '
'; - - element.html(table); - - return function () { - - $(selector + '.json-to-table').css({ - borderCollapse: 'collapse', - width: '100%', - border: settings.borderWidth + ' ' + settings.borderStyle + ' ' + settings.borderColor, - fontFamily: settings.fontFamily - }); - - $(selector + '.jsl').css({ - minWidth: '18px', - width: '18px', - padding: '0 10px 0 10px' - }); - - $(selector + '.json-to-table thead th:not(:first-child), .json-to-table tbody td:not(:first-child)').css({ - width: (100 / $.fn.createTable.getHighestColumnCount(data).max) + '%' - }); - - $(selector + '.json-to-table thead th, .json-to-table tbody td').css({ - border: settings.borderWidth + ' ' + settings.borderStyle + ' ' + settings.borderColor - }); - - $(selector + '.json-to-table thead th').css({ - backgroundColor: settings.thBg, - color: settings.thColor, - height: settings.thHeight, - fontFamily: settings.thFontFamily, - fontSize: settings.thFontSize, - textTransform: settings.thTextTransform - }); - - $(selector + '.json-to-table tbody td').css({ - backgroundColor: settings.trBg, - color: settings.trColor, - paddingLeft: settings.tdPaddingLeft, - paddingRight: settings.tdPaddingRight, - height: settings.trHeight, - fontSize: settings.trFontSize, - fontFamily: settings.trFontFamily - }); - - }(); - }; - - $.fn.createTable.getHighestColumnCount = function (data) { - - var count = 0, temp = 0, column = {max: 0, when: 0}; - - for (var i = 0; i < data.length; i++) { - count = $.fn.getObjectLength(data[i]); - if (temp <= count) { - temp = count; - column.max = count; - column.when = i; - } - } - - return column; - }; - - $.fn.createTable.parseTableData = function (data, thead) { - - var row = ''; - - for (var i = 0; i < data.length; i++) { - if (thead === false) row += '' + (i + 1) + ''; - $.each(data[i], function (key, value) { - if (thead === true) { - if (i === $.fn.createTable.getHighestColumnCount(data).when) { - row += '' + $.fn.humanize(key) + ''; - } - } else if (thead === false) { - row += '' + value + ''; - } - }); - if (thead === false) row += ''; - } - - return row; - }; - - $.fn.getObjectLength = function (object) { - - var length = 0; - - for (var key in object) { - if (object.hasOwnProperty(key)) { - ++length; - } - } - - return length; - }; - - $.fn.humanize = function (text) { - - var string = text.split('_'); - - for (i = 0; i < string.length; i++) { - string[i] = string[i].charAt(0).toUpperCase() + string[i].slice(1); - } - - return string.join(' '); - }; - - $.fn.createTable.defaults = { - borderWidth: '1px', - borderStyle: 'solid', - borderColor: '#DDDDDD', - fontFamily: 'Verdana, Helvetica, Arial, FreeSans, sans-serif', - - thBg: '#F3F3F3', - thColor: '#0E0E0E', - thHeight: '30px', - thFontFamily: 'Verdana, Helvetica, Arial, FreeSans, sans-serif', - thFontSize: '14px', - thTextTransform: 'capitalize', - - trBg: '#FFFFFF', - trColor: '#0E0E0E', - trHeight: '25px', - trFontFamily: 'Verdana, Helvetica, Arial, FreeSans, sans-serif', - trFontSize: '13px', - - tdPaddingLeft: '10px', - tdPaddingRight: '10px' - } - -}(jQuery)); \ No newline at end of file diff --git a/JSON-to-Table-1.0.2.js b/JSON-to-Table-1.0.2.js new file mode 100644 index 0000000..818688a --- /dev/null +++ b/JSON-to-Table-1.0.2.js @@ -0,0 +1,173 @@ +(function ($) { + $.fn.createTable = function (data, options) { + var element = this; + var settings = $.extend({}, $.fn.createTable.defaults, options); + var selector; + + if (element[0].className !== undefined && element[0].className.length > 0) { + var split = element[0].className.split(' '); + selector = '.' + split.join('.') + ' '; + } else if (element[0].id !== undefined) { + selector = '#' + element[0].id + ' '; + } + + var table = $.fn.createTable.parseTableData(data, settings.showTableHeader, settings); + element.html(table); + + return function () { + $(selector + '.json-to-table').css({ + borderCollapse: 'collapse', + width: settings.width, + border: settings.borderWidth + ' ' + settings.borderStyle + ' ' + settings.borderColor, + fontFamily: settings.fontFamily + }); + + $(selector + '.json-to-table caption#title').css({ + captionSide: 'top', + textAlign: settings.titleAlign + }); + $(selector + '.json-to-table caption#footer').css({ + captionSide: 'bottom', + textAlign: settings.footerAlign, + fontSize: '12px' + + }); + + $(selector + '.jsl').css({ + minWidth: '18px', + width: '18px', + padding: '0' + }); + + if (settings.colsSameWidh) { + $(selector + '.json-to-table thead th:not(:first-child), .json-to-table tbody td:not(:first-child)').css({ + width: (100 / Object.keys(data[0]).length ) + '%' + }); + } + + $(selector + '.json-to-table thead th, .json-to-table tbody td').css({ + border: settings.borderWidth + ' ' + settings.borderStyle + ' ' + settings.borderColor + }); + + $(selector + '.json-to-table thead th').css({ + backgroundColor: settings.thBg, + color: settings.thColor, + height: settings.thHeight, + fontFamily: settings.thFontFamily, + fontSize: settings.thFontSize, + textTransform: settings.thTextTransform + }); + + $(selector + '.json-to-table tbody td').css({ + backgroundColor: settings.trBg, + color: settings.trColor, + paddingLeft: settings.tdPaddingLeft, + paddingRight: settings.tdPaddingRight, + height: settings.trHeight, + fontSize: settings.trFontSize, + fontFamily: settings.trFontFamily + }); + }(); + }; + + $.fn.createTable.isFunction = function (functionToCheck) { + return functionToCheck && {}.toString.call(functionToCheck) === '[object Function]'; + } + + $.fn.createTable.parseTableData = function (data, thead, settings) { + + if (settings.debug) { + settings.parser = function(rowIdx, colIdx, value, isHead){ return (rowIdx+':'+colIdx); }; + settings.parseHeader = true; + settings.parseRowNumber = true; + settings.showTitle = true; + settings.showFooter = true; + } + + var table = ''; + table = ''; + + title = settings.titleText? settings.titleText : data.length+' records'; + footer = settings.footerText? settings.footerText : data.length+' records'; + if (settings.showTitle) table += ''; + if (settings.showFooter) table += ''; + + var iColHeader = 1; + if (thead === true) { + table += settings.showTableRowNumber ? '' : ''; + + $.each(data[0], function (key, value) { + if ($.fn.createTable.isFunction(settings.parser)) { + settings.parserCols = Array.isArray(settings.parserCols) ? settings.parserCols : []; + key = settings.parseHeader ? settings.parser(0, iColHeader, key, true) : key; + } + iColHeader++; + table += ''; + }); + table += ''; + } + table += ''; + + for (var i = 0; i < data.length; i++) { + if ($.fn.createTable.isFunction(settings.parser)) { + settings.parserCols = Array.isArray(settings.parserCols) ? settings.parserCols : []; + value = settings.parseRowNumber ? settings.parser(i+1, 0, settings.rowNumberInitialValue + i, false) : settings.rowNumberInitialValue + i; + } else { //fix error when showTableRowNumber is true and no parser is present. missing value. + value = settings.rowNumberInitialValue + i; + } + table += settings.showTableRowNumber ? ('') : ''; + + iCol = 1; + $.each(data[i], function (key, value) { + if ($.fn.createTable.isFunction(settings.parser)) { + settings.parserCols = Array.isArray(settings.parserCols) ? settings.parserCols : []; + value = (settings.parserCols.includes(key) || settings.parserCols.length == 0) ? settings.parser(i+1, iCol, value, false) : value; + } + iCol++; + table += ''; + }); + table += ''; + } + table += ''; + table += '
'+title+''+footer+'
' + $.fn.humanize(key) + '
'+(value)+'
' + value + '
'; + return table; + }; + + $.fn.humanize = function (text) { + var string = text.split('_') + for (i = 0; i < string.length; i++) { + string[i] = string[i].charAt(0).toUpperCase() + string[i].slice(1); + } + return string.join(' '); + }; + + $.fn.createTable.defaults = { + width: '100%', + showTableHeader: true, + rowNumberInitialValue: 1, + + titleAlign: 'center', + footerAlign: 'center', + + borderWidth: '1px', + borderStyle: 'solid', + borderColor: '#DDDDDD', + fontFamily: 'Verdana, Helvetica, Arial, FreeSans, sans-serif', + + thBg: '#F3F3F3', + thColor: '#0E0E0E', + thHeight: '30px', + thFontFamily: 'Verdana, Helvetica, Arial, FreeSans, sans-serif', + thFontSize: '14px', + thTextTransform: 'capitalize', + + trBg: '#FFFFFF', + trColor: '#0E0E0E', + trHeight: '25px', + trFontFamily: 'Verdana, Helvetica, Arial, FreeSans, sans-serif', + trFontSize: '13px', + + tdPaddingLeft: '10px', + tdPaddingRight: '10px' + } +}(jQuery)); \ No newline at end of file diff --git a/JSON-to-Table.min.1.0.0.js b/JSON-to-Table.min.1.0.0.js deleted file mode 100644 index 8102ff0..0000000 --- a/JSON-to-Table.min.1.0.0.js +++ /dev/null @@ -1,2 +0,0 @@ - -!function(t){t.fn.createTable=function(e,a){var r,o=this,n=t.extend({},t.fn.createTable.defaults,a);if(void 0!==o[0].className){var i=o[0].className.split(" ");r="."+i.join(".")+" "}else void 0!==o[0].id&&(r="#"+o[0].id+" ");var l='';return l+='',l+=t.fn.createTable.parseTableData(e,!0),l+="",l+="",l+=t.fn.createTable.parseTableData(e,!1),l+="",l+="
",o.html(l),function(){t(r+".json-to-table").css({borderCollapse:"collapse",width:"100%",border:n.borderWidth+" "+n.borderStyle+" "+n.borderColor,fontFamily:n.fontFamily}),t(r+".jsl").css({minWidth:"18px",width:"18px",padding:"0 10px 0 10px"}),t(r+".json-to-table thead th:not(:first-child), .json-to-table tbody td:not(:first-child)").css({width:100/t.fn.createTable.getHighestColumnCount(e).max+"%"}),t(r+".json-to-table thead th, .json-to-table tbody td").css({border:n.borderWidth+" "+n.borderStyle+" "+n.borderColor}),t(r+".json-to-table thead th").css({backgroundColor:n.thBg,color:n.thColor,height:n.thHeight,fontFamily:n.thFontFamily,fontSize:n.thFontSize,textTransform:n.thTextTransform}),t(r+".json-to-table tbody td").css({backgroundColor:n.trBg,color:n.trColor,paddingLeft:n.trPaddingLeft,paddingRight:n.trPaddingRight,height:n.trHeight,fontSize:n.trFontSize,fontFamily:n.trFontFamily})}()},t.fn.createTable.getHighestColumnCount=function(e){for(var a=0,r=0,o={max:0,when:0},n=0;n=r&&(r=a,o.max=a,o.when=n);return o},t.fn.createTable.parseTableData=function(e,a){for(var r="",o=0;o'+(o+1)+""),t.each(e[o],function(n,i){a===!0?o===t.fn.createTable.getHighestColumnCount(e).when&&(r+=""+t.fn.humanize(n)+""):a===!1&&(r+=""+i+"")}),a===!1&&(r+="");return r},t.fn.getObjectLength=function(t){var e=0;for(var a in t)t.hasOwnProperty(a)&&++e;return e},t.fn.humanize=function(t){var e=t.split("_");for(i=0;i0){var i=this[0].className.split(" ");o="."+i.join(".")+" "}else void 0!==this[0].id&&(o="#"+this[0].id+" ");var l=t.fn.createTable.parseTableData(e,a.showTableHeader,a);return this.html(l),t(o+".json-to-table").css({borderCollapse:"collapse",width:a.width,border:a.borderWidth+" "+a.borderStyle+" "+a.borderColor,fontFamily:a.fontFamily}),t(o+".json-to-table caption#title").css({captionSide:"top",textAlign:a.titleAlign}),t(o+".json-to-table caption#footer").css({captionSide:"bottom",textAlign:a.footerAlign,fontSize:"12px"}),t(o+".jsl").css({minWidth:"18px",width:"18px",padding:"0"}),a.colsSameWidh&&t(o+".json-to-table thead th:not(:first-child), .json-to-table tbody td:not(:first-child)").css({width:100/Object.keys(e[0]).length+"%"}),t(o+".json-to-table thead th, .json-to-table tbody td").css({border:a.borderWidth+" "+a.borderStyle+" "+a.borderColor}),t(o+".json-to-table thead th").css({backgroundColor:a.thBg,color:a.thColor,height:a.thHeight,fontFamily:a.thFontFamily,fontSize:a.thFontSize,textTransform:a.thTextTransform}),void t(o+".json-to-table tbody td").css({backgroundColor:a.trBg,color:a.trColor,paddingLeft:a.tdPaddingLeft,paddingRight:a.tdPaddingRight,height:a.trHeight,fontSize:a.trFontSize,fontFamily:a.trFontFamily})},t.fn.createTable.isFunction=function(t){return t&&"[object Function]"==={}.toString.call(t)},t.fn.createTable.parseTableData=function(e,r,o){o.debug&&(o.parser=function(t,e,r,o){return t+":"+e},o.parseHeader=!0,o.parseRowNumber=!0,o.showTitle=!0,o.showFooter=!0);var a="";a='',title=o.titleText?o.titleText:e.length+" records",footer=o.footerText?o.footerText:e.length+" records",o.showTitle&&(a+='"),o.showFooter&&(a+='");var i=1;!0===r&&(a+=o.showTableRowNumber?'':"",t.each(e[0],function(e,r){t.fn.createTable.isFunction(o.parser)&&(o.parserCols=Array.isArray(o.parserCols)?o.parserCols:[],e=o.parseHeader?o.parser(0,i,e,!0):e),i++,a+=""}),a+=""),a+="";for(var l=0;l":"",iCol=1,t.each(e[l],function(e,r){t.fn.createTable.isFunction(o.parser)&&(o.parserCols=Array.isArray(o.parserCols)?o.parserCols:[],r=o.parserCols.includes(e)||0==o.parserCols.length?o.parser(l+1,iCol,r,!1):r),iCol++,a+=""}),a+="";return a+="",a+="
'+title+"'+footer+"
"+t.fn.humanize(e)+"
'+value+"
"+r+"
"},t.fn.humanize=function(t){var e=t.split("_");for(i=0;i `https://github.com/shahnewazshamim/json-to-table/archive/master.zip` +> `https://github.com/philmottin/json-to-table/archive/refs/heads/master.zip` Git Clone: -> `https://github.com/shahnewazshamim/json-to-table.git` +> `https://github.com/philmottin/json-to-table.git` ## Installation -Using **Production version** `JSON-to-Table.min.1.0.0.js` +1- Add jQuery > `` -Or **Development version** `JSON-to-Table.1.0.0.js` -> `` +2- Add JSON-to-Table pluging +Using **Production version** `JSON-to-Table.min.1.0.1.js` +> `` + +Or **Development version** `JSON-to-Table-1.0.1.js` +> `` ## How to use Just call `createTable` method in your document ready function with your json `data` object. -`$('your-selector').createTable(data);` +`$('your-selector').createTable(data, optionsObject);` + + + +## Property (optionsObject) Definition + +> **Table properties** + +- #### showTableRowNumber + Display the first column as counter. + Default: false + + **Ex:** `showTableRowNumber: true` + +- #### rowNumberInitialValue + If you would like start with row number 9 set it. Otherwise let default as 1. + Default: 1 + + **Ex:** `rowNumberInitialValue: 101` + +- #### parser + Custom function to parse data values. + Default: none + + **Ex:** `parser: function(rowIdx, colIdx, value, isHead) { /* function scope */ return value; }` + +- #### parserCols + Array of columns names to execute the parser function. If ommited, the parser run on all fields. + Default: all cells, except header and rowNumbers. + + **Ex:** `parserCols: ['column1','column2']` + +- #### parseHeader + Enable parsing on header cells + Default: false + + **Ex:** `parseHeader: true` + +- #### parseRowNumber + Enable parsing on rowNumber cells + Default: false + + **Ex:** `parseRowNumber: true` + +- #### showTitle + Enable table title at the top + Default: false + + **Ex:** `showTitle: true` + +- #### titleText + Text to display in the title + Default: Will show the number of records. `'n records'` + + **Ex:** `titleText: 'My awesome table title'` + +- #### titleAlign + Set the alignment of the title. `('left' | 'center' | 'right')` + Default: 'center' + + **Ex:** `titleAlign: 'left'` + +- #### showFooter + Enable table footer at the bottom + Default: false + + **Ex:** `showFooter: true` + +- #### footerText + Text to display in the footer + Default: Will show the number of records. `'n records'` + + **Ex:** `footerText: 'My awesome table footer'` + +- #### footerAlign + Set the alignment of the footer. `('left' | 'center' | 'right')` + Default: 'center' + + **Ex:** `footerAlign: 'left'` + +- #### debug + Show all indexes on all cells + Default: false + + **Ex:** `debug: true` -## Property Definition > **Every single value of these properties is similar to CSS property value.** + +- #### colsSameWidh + Set all table columns with same widht + Default: false + + **Ex:** `colsSameWidh: true + +- #### width + Set table width. Any css unit can be used like '%', 'px', 'em' + Default: '100%' + + **Ex:** `width: '1200px'` + - #### borderWidth Defines to control table and it's all rows and columns border width. @@ -117,6 +220,92 @@ Just call `createTable` method in your document ready function with your json `d ## Examples +##### Use custom parser +```javascript +var data = [ + { + "id": 1123, + "first_name": "Alli", + "last_name": "Cassey", + "email": "acassey0@list-manage.com", + "gender": "Female", + "registered": false + }, + { + "id": 1124, + "first_name": "Clyde", + "last_name": "Bromage", + "email": "cbromage1@bbb.org", + "gender": "Male", + "registered": true + }, + { + "id": 1125, + "first_name": "Janeczka", + "last_name": "Trett", + "email": "jtrett2@vistaprint.com", + "gender": "Female", + "registered": null + }, + { + "id": 1126, + "first_name": "Kristoforo", + "last_name": "Duplain", + "email": "kduplain3@vimeo.com", + "gender": "Male", + "registered": true + }, + { + "id": 1127, + "first_name": "Devonna", + "last_name": "Medeway", + "email": "dmedeway4@google.nl", + "gender": "Female", + "registered": false + } + ]; + + var parser = function(rowIdx, colIdx, value, isHead) { + if (String(value) == 'true') + value = '✔'; + else if (String(value) == 'false') + value = '-'; + else if (value == null) + value = ''; + else if (String(value) == 'Male') + value = '👨🏻'; + else if (String(value) == 'Female') + value = '👩🏻'; + return (value); + } + + $('#table').createTable(data, { + //showTableHeader: false, + showTableRowNumber: true, + //rowNumberInitialValue: 101, + colsSameWidth: false, + width: '80%', + + parser: parser, + //parseHeader: true, + //parseRowNumber: true, + //parserCols: ['registered'], + + showTitle: true, + titleText: 'My awesome table', + //titleAlign: 'left', + + showFooter: true, + //footerText: 'My awesome footer', + footerAlign: 'right', + + //debug: true + }); +``` + + + + ##### Using a JSON data from your JS variable. ```javascript var data = [ diff --git a/screenshot_parser.png b/screenshot_parser.png new file mode 100644 index 0000000..5ca07db Binary files /dev/null and b/screenshot_parser.png differ