Skip to content

Commit 9688c55

Browse files
philmottinphilmottin
committed
Fix selector bug. Add parse title, footer +options
Bug fix - selector with no class. Improve performance - only call parseTableData() once - Removed getHighestColumnCount () and getObjectLength() functions. Using Object.keys(data).length property. Features: - toggle table header, row numbers - set initial row number value - set table width - custom parser function - toggle parse headers, row numbers - choose columns to parse - added title and footer - debug parameter, show all indexes on all cells
1 parent 6324758 commit 9688c55

9 files changed

+545
-196
lines changed

‎Example/Example parse function.html‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>JSON-to-Table parser example</title>
6+
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300|Open+Sans+Condensed:300|Open+Sans:300"
7+
rel="stylesheet">
8+
<style>
9+
body {
10+
font-family: 'Josefin Sans', sans-serif;
11+
}
12+
13+
h1 {
14+
font-size: 40px;
15+
color: #08090d;
16+
text-align: center;
17+
}
18+
19+
h1 span {
20+
font-size: 25px;
21+
color: #477dd7;
22+
}
23+
24+
h2 {
25+
font-family: "Open Sans Condensed", sans-serif;
26+
font-size: 18px;
27+
}
28+
29+
.margin-bottom {
30+
margin-bottom: 50px;
31+
}
32+
</style>
33+
</head>
34+
<body>
35+
<h1>JSON Data To HTML Table - <span>An Example of Lightweight jQuery Plugin for Beginners</span></h1>
36+
<h2>Custom parse function Example</h2>
37+
<div id="table"></div>
38+
39+
<script type="application/javascript" src="jQuery-3.2.1.min.js"></script>
40+
<script src="../JSON-to-Table.min.1.0.1.js"></script>
41+
<script type="application/javascript">
42+
$(document).ready(function() {
43+
44+
var data = [
45+
{
46+
"id": 5123,
47+
"first_name": "Alli",
48+
"last_name": "Cassey",
49+
"email": "acassey0@list-manage.com",
50+
"gender": "Female",
51+
"registered": false
52+
},
53+
{
54+
"id": 5124,
55+
"first_name": "Clyde",
56+
"last_name": "Bromage",
57+
"email": "cbromage1@bbb.org",
58+
"gender": "Male",
59+
"registered": true
60+
},
61+
{
62+
"id": 5125,
63+
"first_name": "Janeczka",
64+
"last_name": "Trett",
65+
"email": "jtrett2@vistaprint.com",
66+
"gender": "Female",
67+
"registered": null
68+
},
69+
{
70+
"id": 5126,
71+
"first_name": "Kristoforo",
72+
"last_name": "Duplain",
73+
"email": "kduplain3@vimeo.com",
74+
"gender": "Male",
75+
"registered": true
76+
},
77+
{
78+
"id": 5127,
79+
"first_name": "Devonna",
80+
"last_name": "Medeway",
81+
"email": "dmedeway4@google.nl",
82+
"gender": "Female",
83+
"registered": false
84+
}
85+
];
86+
87+
var parser = function(rowIdx, colIdx, value, isHead) {
88+
if (String(value) == 'true')
89+
value = '✔';
90+
else if (String(value) == 'false')
91+
value = '-';
92+
else if (value == null)
93+
value = '';
94+
else if (String(value) == 'Male')
95+
value = '👨🏻';
96+
else if (String(value) == 'Female')
97+
value = '👩🏻';
98+
return (value);
99+
}
100+
101+
$('#table').createTable(data, {
102+
//showTableHeader: false,
103+
showTableRowNumber: true,
104+
//rowNumberInitialValue: 101,
105+
colsSameWidth: false,
106+
width: '80%',
107+
108+
parser: parser,
109+
//parseHeader: true,
110+
//parseRowNumber: true,
111+
//parserCols: ['registered'],
112+
113+
showTitle: true,
114+
titleText: 'My awesome table',
115+
//titleAlign: 'left',
116+
117+
showFooter: true,
118+
//footerText: 'My awesome footer',
119+
footerAlign: 'right',
120+
121+
//debug: true
122+
});
123+
124+
});//end jQuery
125+
</script>
126+
</body>
127+
</html>

‎Example/example.html‎ renamed to ‎Example/Example.html‎

Lines changed: 8 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@
55
<title>JSON Data To HTML Table - jQuery Plugin</title>
66
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300|Open+Sans+Condensed:300|Open+Sans:300"
77
rel="stylesheet">
8-
<script src="jQuery-3.2.1.min.js"></script>
9-
<script src="../JSON-to-Table.min.1.0.0.js"></script>
108
<style>
119
body {
1210
font-family: 'Josefin Sans', sans-serif;
@@ -34,41 +32,17 @@
3432
</style>
3533
</head>
3634
<body>
35+
3736
<h1>JSON Data To HTML Table - <span>An Example of Lightweight jQuery Plugin for Beginners</span></h1>
38-
<h2>External JSON data file Example</h2>
39-
<div class="table margin-bottom"></div>
4037
<h2>JSON Object variable Example</h2>
41-
<div id="table-2" class="margin-bottom"></div>
42-
<script type="text/javascript">
43-
$(document).ready(function () {
44-
$.getJSON("sample-data.json", function (data) {
45-
$('.table').createTable(data, {
46-
// General Style for Table
47-
borderWidth: '1px',
48-
borderStyle: 'solid',
49-
borderColor: '#DDDDDD',
50-
fontFamily: 'Verdana, Helvetica, Arial, FreeSans, sans-serif',
5138

52-
// Table Header Style
53-
thBg: '#F3F3F3',
54-
thColor: '#0E0E0E',
55-
thHeight: '30px',
56-
thFontFamily: '"Open Sans Condensed", sans-serif',
57-
thFontSize: '14px',
58-
thTextTransform: 'capitalize',
39+
<script src="jQuery-3.2.1.min.js"></script>
40+
<script src="../JSON-to-Table.min.1.0.1.js"></script>
41+
<div id="table" class="margin-bottom"></div>
5942

60-
// Table Body/Row Style
61-
trBg: '#FFFFFF',
62-
trColor: '#0E0E0E',
63-
trHeight: '25px',
64-
trFontFamily: '"Open Sans", sans-serif',
65-
trFontSize: '13px',
66-
67-
// Table Body's Column Style
68-
tdPaddingLeft: '10px',
69-
tdPaddingRight: '10px'
70-
});
71-
});
43+
<script type="text/javascript">
44+
$(document).ready(function () {
45+
7246
var data = [{
7347
"id": 1,
7448
"first_name": "Alli",
@@ -140,7 +114,7 @@ <h2>JSON Object variable Example</h2>
140114
"gender": "Male",
141115
"ip_address": "243.29.74.93"
142116
}];
143-
$('#table-2').createTable(data, {});
117+
$('#table').createTable(data, {});
144118
});
145119
</script>
146120
</body>

‎Example/External JSON Example.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>JSON Data To HTML Table - jQuery Plugin</title>
6+
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300|Open+Sans+Condensed:300|Open+Sans:300"
7+
rel="stylesheet">
8+
<style>
9+
body {
10+
font-family: 'Josefin Sans', sans-serif;
11+
}
12+
13+
h1 {
14+
font-size: 40px;
15+
color: #08090d;
16+
text-align: center;
17+
}
18+
19+
h1 span {
20+
font-size: 25px;
21+
color: #477dd7;
22+
}
23+
24+
h2 {
25+
font-family: "Open Sans Condensed", sans-serif;
26+
font-size: 18px;
27+
}
28+
29+
.margin-bottom {
30+
margin-bottom: 50px;
31+
}
32+
</style>
33+
</head>
34+
<body>
35+
<h1>JSON Data To HTML Table - <span>An Example of Lightweight jQuery Plugin for Beginners</span></h1>
36+
<h2>External JSON data file Example</h2>
37+
<h4>⚠ Must run vai web server. CORS policy won't allow to load data locally.</h4>
38+
<div class="table margin-bottom"></div>
39+
40+
<script src="jQuery-3.2.1.min.js"></script>
41+
<script src="../JSON-to-Table.min.1.0.1.js"></script>
42+
<script type="text/javascript">
43+
$(document).ready(function () {
44+
45+
$.getJSON("sample-data.json", function (data) {
46+
$('.table').createTable(data, {
47+
// General Style for Table
48+
borderWidth: '1px',
49+
borderStyle: 'solid',
50+
borderColor: '#DDDDDD',
51+
fontFamily: 'Verdana, Helvetica, Arial, FreeSans, sans-serif',
52+
53+
// Table Header Style
54+
thBg: '#F3F3F3',
55+
thColor: '#0E0E0E',
56+
thHeight: '30px',
57+
thFontFamily: '"Open Sans Condensed", sans-serif',
58+
thFontSize: '14px',
59+
thTextTransform: 'capitalize',
60+
61+
// Table Body/Row Style
62+
trBg: '#FFFFFF',
63+
trColor: '#0E0E0E',
64+
trHeight: '25px',
65+
trFontFamily: '"Open Sans", sans-serif',
66+
trFontSize: '13px',
67+
68+
// Table Body's Column Style
69+
tdPaddingLeft: '10px',
70+
tdPaddingRight: '10px'
71+
});
72+
});
73+
});
74+
</script>
75+
</body>
76+
</html>

0 commit comments

Comments
 (0)