Skip to content

Commit 68d7528

Browse files
shahnewazshamimshahnewazshamim
committed
Init Commit
1 parent 2f56024 commit 68d7528

File tree

7 files changed

+909
-2
lines changed

7 files changed

+909
-2
lines changed

‎Example/example.html‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
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+
<script src="jQuery-3.2.1.min.js"></script>
9+
<script src="../JSON-to-Table.min.1.0.0.js"></script>
10+
<style>
11+
body {
12+
font-family: 'Josefin Sans', sans-serif;
13+
}
14+
15+
h1 {
16+
font-size: 40px;
17+
color: #08090d;
18+
text-align: center;
19+
}
20+
21+
h1 span {
22+
font-size: 25px;
23+
color: #477dd7;
24+
}
25+
26+
h2 {
27+
font-family: "Open Sans Condensed", sans-serif;
28+
font-size: 18px;
29+
}
30+
31+
.margin-bottom {
32+
margin-bottom: 50px;
33+
}
34+
</style>
35+
</head>
36+
<body>
37+
<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>
40+
<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',
51+
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',
59+
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+
});
72+
var data = [{
73+
"id": 1,
74+
"first_name": "Alli",
75+
"last_name": "Cassey",
76+
"email": "acassey0@list-manage.com",
77+
"gender": "Female",
78+
"ip_address": "129.82.128.62"
79+
}, {
80+
"id": 2,
81+
"first_name": "Clyde",
82+
"last_name": "Bromage",
83+
"email": "cbromage1@bbb.org",
84+
"gender": "Male",
85+
"ip_address": "232.45.125.179"
86+
}, {
87+
"id": 3,
88+
"first_name": "Janeczka",
89+
"last_name": "Trett",
90+
"email": "jtrett2@vistaprint.com",
91+
"gender": "Female",
92+
"ip_address": "149.4.116.82"
93+
}, {
94+
"id": 4,
95+
"first_name": "Kristoforo",
96+
"last_name": "Duplain",
97+
"email": "kduplain3@vimeo.com",
98+
"gender": "Male",
99+
"ip_address": "137.198.100.233"
100+
}, {
101+
"id": 5,
102+
"first_name": "Devonna",
103+
"last_name": "Medeway",
104+
"email": "dmedeway4@google.nl",
105+
"gender": "Female",
106+
"ip_address": "136.193.208.118"
107+
}, {
108+
"id": 6,
109+
"first_name": "Kincaid",
110+
"last_name": "Blagdon",
111+
"email": "kblagdon5@wunderground.com",
112+
"gender": "Male",
113+
"ip_address": "192.198.63.72"
114+
}, {
115+
"id": 7,
116+
"first_name": "Stella",
117+
"last_name": "Parkman",
118+
"email": "sparkman6@cornell.edu",
119+
"gender": "Female",
120+
"ip_address": "0.210.239.37"
121+
}, {
122+
"id": 8,
123+
"first_name": "Bowie",
124+
"last_name": "Concklin",
125+
"email": "bconcklin7@webnode.com",
126+
"gender": "Male",
127+
"ip_address": "83.150.196.191"
128+
}, {
129+
"id": 9,
130+
"first_name": "Robin",
131+
"last_name": "Thickett",
132+
"email": "rthickett8@boston.com",
133+
"gender": "Female",
134+
"ip_address": "44.251.154.187"
135+
}, {
136+
"id": 10,
137+
"first_name": "Lanie",
138+
"last_name": "Parsall",
139+
"email": "lparsall9@rediff.com",
140+
"gender": "Male",
141+
"ip_address": "243.29.74.93"
142+
}];
143+
$('#table-2').createTable(data, {});
144+
});
145+
</script>
146+
</body>
147+
</html>

‎Example/jQuery-3.2.1.min.js‎

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)