Skip to content

Commit a6e1a59

Browse files
AndrejGajdosAndrejGajdos
committed
readme update
readme update
1 parent 27507fd commit a6e1a59

File tree

2 files changed

+582
-156
lines changed

2 files changed

+582
-156
lines changed

‎README.html

+341
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,341 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
</head>
6+
<body>
7+
8+
<h1 id="nested-datatables">Nested-datatables</h1>
9+
10+
<p>jQuery DataTables plugin for rendering nested DataTables in rows. Inner tables are independent of the data and layout from the outer table.</p>
11+
12+
<h3 id="demohttps:andrejgajdos.github.ionested-datatables"><a href="https://andrejgajdos.github.io/nested-datatables/">Demo</a></h3>
13+
14+
<h3 id="jsfiddlehttps:jsfiddle.netandrej_gajdoszu11wk2o37"><a href="https://jsfiddle.net/andrej_gajdos/zu11wk2o/37/">JSFiddle</a></h3>
15+
16+
<h2 id="installation">Installation</h2>
17+
18+
<p>Download the <a href="https://github.com/AndrejGajdos/nested-datatables/archive/master.zip">latest version</a> and include <a href="https://github.com/AndrejGajdos/nested-datatables/blob/master/dist/nested.datatables.js">nested.datatables.min.js</a> file</p>
19+
20+
<h3 id="npm">NPM</h3>
21+
22+
<pre><code>$ npm install nested-datatables
23+
</code></pre>
24+
25+
<h3 id="usage">Usage</h3>
26+
27+
<pre><code class="js">var table = new nestedTables.TableHierarchy('example', data, settigns);
28+
table.initializeTableHierarchy();
29+
</code></pre>
30+
31+
<h2 id="methods">Methods</h2>
32+
33+
<h3 id="tablehierarchywrapperiddatasettings">TableHierarchy(wrapperID, data, settings)</h3>
34+
35+
<p>Main NestedTables constructor.</p>
36+
37+
<h4 id="wrapperid">wrapperID</h4>
38+
39+
<p>Type: <code>String</code></p>
40+
41+
<p>ID of a DOM element where will be table hierarchy rendered.</p>
42+
43+
<h4 id="data">data</h4>
44+
45+
<p>Type: <code>Array.&lt;Object&gt;</code></p>
46+
47+
<p>Data used for building table hierarchy. Each item consists of property <code>data</code> and property <code>kids</code>, which represents array of child elements.</p>
48+
49+
<p>Check examples below how to define json data.</p>
50+
51+
<h4 id="settings">settings</h4>
52+
53+
<p>Type: <code>Object</code></p>
54+
55+
<p>Settings for jQuery DataTables constructor.</p>
56+
57+
<h3 id=".initializetablehierarchy">.initializeTableHierarchy()</h3>
58+
59+
<p>Build nested table hierarchy.</p>
60+
61+
<h2 id="events">Events</h2>
62+
63+
<h4 id="onshowchildhierarchy">onShowChildHierarchy</h4>
64+
65+
<p>Triggered when a child hierarchy is shown</p>
66+
67+
<pre><code class="js">// '#example' is wrapper ID for table hierarchy
68+
var tableEle = document.querySelector('#example .table');
69+
tableEle.addEventListener('onShowChildHierarchy', function(e) {
70+
console.log(e);
71+
});
72+
</code></pre>
73+
74+
<h4 id="onhidechildhierarchy">onHideChildHierarchy</h4>
75+
76+
<p>Triggered when a child hierarchy is hidden</p>
77+
78+
<pre><code class="js">// '#example' is wrapper ID for table hierarchy
79+
var tableEle = document.querySelector('#example .table');
80+
tableEle.addEventListener('onHideChildHierarchy', function(e) {
81+
console.log(e);
82+
});
83+
</code></pre>
84+
85+
<h2 id="example">Example</h2>
86+
87+
<pre><code class="html">&lt;!DOCTYPE html&gt;
88+
&lt;html&gt;
89+
&lt;head&gt;
90+
&lt;meta charset=&quot;UTF-8&quot; /&gt;
91+
92+
&lt;script src=&quot;./dist/nested.datatables.min.js&quot;&gt;&lt;/script&gt;
93+
&lt;/head&gt;
94+
&lt;body&gt;
95+
&lt;div id=&quot;example&quot; class=&quot;container&quot;&gt;&lt;/div&gt;
96+
97+
&lt;script&gt;
98+
var dataInJson = [
99+
{
100+
data: {
101+
name: 'b1',
102+
street: 's1',
103+
city: 'c1',
104+
departments: 10,
105+
offices: 15
106+
},
107+
kids: [
108+
{
109+
data: {
110+
department: 'HR',
111+
supervisor: 'Isidor Bristol',
112+
floor: 1,
113+
employees: 15
114+
},
115+
kids: [
116+
{
117+
data: {
118+
name: 'Klement Nikodemos',
119+
phone: '+938462',
120+
hire_date: 'January 1, 2010',
121+
id: 3456
122+
},
123+
kids: []
124+
},
125+
{
126+
data: {
127+
name: 'Madhava Helmuth',
128+
phone: '+348902',
129+
hire_date: 'May 23, 2002',
130+
id: 1234
131+
},
132+
kids: []
133+
},
134+
{
135+
data: {
136+
name: 'Andria Jesse',
137+
phone: '456123',
138+
hire_date: 'October 23, 2011',
139+
id: 9821
140+
},
141+
kids: []
142+
}
143+
]
144+
},
145+
{
146+
data: {
147+
department: 'development',
148+
supervisor: 'Jim Linwood',
149+
floor: 2,
150+
employees: 18
151+
},
152+
kids: [
153+
{
154+
data: {
155+
name: 'Origenes Maxwell',
156+
phone: '345892',
157+
hire_date: 'February 1, 2004',
158+
id: 6234
159+
},
160+
kids: []
161+
}
162+
]
163+
},
164+
{
165+
data: {
166+
department: 'testing',
167+
supervisor: 'Zekeriya Seok',
168+
floor: 4,
169+
employees: 11
170+
},
171+
kids: []
172+
}
173+
]
174+
},
175+
{
176+
data: {
177+
name: 'b2',
178+
street: 's10',
179+
city: 'c2',
180+
departments: 3,
181+
offices: 10
182+
},
183+
kids: [
184+
{
185+
data: {
186+
department: 'development',
187+
supervisor: 'Gallagher Howie',
188+
floor: 8,
189+
employees: 24
190+
},
191+
kids: [
192+
{
193+
data: {
194+
name: 'Wat Dakota'
195+
},
196+
kids: []
197+
}
198+
]
199+
},
200+
{
201+
data: {
202+
department: 'testing',
203+
supervisor: 'Shirley Gayle',
204+
floor: 4,
205+
employees: 11
206+
},
207+
kids: []
208+
}
209+
]
210+
},
211+
{
212+
data: {
213+
name: 'b3',
214+
street: 's3',
215+
city: 'c3',
216+
departments: 2,
217+
offices: 1
218+
},
219+
kids: [
220+
{
221+
data: {
222+
department: 'development'
223+
},
224+
kids: [
225+
{
226+
data: {
227+
name: 'Wat Dakota'
228+
},
229+
kids: []
230+
}
231+
]
232+
},
233+
{}
234+
]
235+
},
236+
237+
{
238+
data: {
239+
name: 'b4',
240+
city: 'c4'
241+
},
242+
kids: []
243+
}
244+
];
245+
246+
var settigns = {
247+
iDisplayLength: 20,
248+
bLengthChange: false,
249+
bFilter: false,
250+
bSort: false,
251+
bInfo: false
252+
};
253+
254+
var table = new nestedTables.TableHierarchy(
255+
'example',
256+
dataInJson,
257+
settigns
258+
);
259+
table.initializeTableHierarchy();
260+
&lt;/script&gt;
261+
&lt;/body&gt;
262+
&lt;/html&gt;
263+
</code></pre>
264+
265+
<h2 id="example2">Example 2</h2>
266+
267+
<pre><code class="html">&lt;!DOCTYPE html&gt;
268+
&lt;html&gt;
269+
&lt;head&gt;
270+
&lt;meta charset=&quot;UTF-8&quot; /&gt;
271+
272+
&lt;script src=&quot;./dist/nested.datatables.min.js&quot;&gt;&lt;/script&gt;
273+
&lt;/head&gt;
274+
&lt;body&gt;
275+
&lt;div id=&quot;example&quot; class=&quot;container&quot;&gt;&lt;/div&gt;
276+
277+
&lt;script&gt;
278+
var dataInJson2 = [
279+
{
280+
data: {
281+
date: '2018-08'
282+
},
283+
kids: [
284+
{
285+
data: {
286+
' ':
287+
'&amp;lt;input type=&quot;checkbox&quot; name=&quot;exampleCheckbox&quot; value=&quot;exampleCheckbox&quot;&amp;gt;',
288+
img:
289+
'&amp;lt;img src=https:\/\/picsum.photos\/100\/100 width=20 \/&amp;gt;',
290+
like: {
291+
value: 47,
292+
cellClass: 'likeCell',
293+
headerClass: 'likeHeader'
294+
},
295+
perf: { value: 130.55555555555554, cellClass: 'perf' },
296+
date: '2018-08-30'
297+
},
298+
kids: []
299+
},
300+
{
301+
data: {
302+
' ':
303+
'&amp;lt;input type=&quot;checkbox&quot; name=&quot;exampleCheckbox2&quot; value=&quot;exampleCheckbox2&quot;&amp;gt;',
304+
img:
305+
'&amp;lt;img src=https:\/\/picsum.photos\/100\/100 width=20 \/&amp;gt;',
306+
like: 24,
307+
perf: 66.66666666666667,
308+
date: '2018-08-31'
309+
},
310+
kids: []
311+
}
312+
]
313+
}
314+
];
315+
316+
var settigns = {
317+
iDisplayLength: 20,
318+
bLengthChange: false,
319+
bFilter: false,
320+
bSort: false,
321+
bInfo: false
322+
};
323+
324+
var table = new nestedTables.TableHierarchy(
325+
'example',
326+
dataInJson,
327+
settigns
328+
);
329+
table.initializeTableHierarchy();
330+
&lt;/script&gt;
331+
&lt;/body&gt;
332+
&lt;/html&gt;
333+
</code></pre>
334+
335+
<h2 id="license">License</h2>
336+
337+
<p>MIT © <a href="http://andrejgajdos.com">Andrej Gajdos</a></p>
338+
339+
</body>
340+
</html>
341+

0 commit comments

Comments
 (0)