nested-datatables
Version:
jQuery DataTables plugin for rendering nested DataTables in rows. Inner tables are independent of the data and layout from the outer table.
342 lines (292 loc) • 9.03 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="utf-8"/>
</head>
<body>
<h1 id="nested-datatables">Nested-datatables</h1>
<p>jQuery DataTables plugin for rendering nested DataTables in rows. Inner tables are independent of the data and layout from the outer table.</p>
<h3 id="demohttps:andrejgajdos.github.ionested-datatables"><a href="https://andrejgajdos.github.io/nested-datatables/">Demo</a></h3>
<h3 id="jsfiddlehttps:jsfiddle.netandrej_gajdoszu11wk2o37"><a href="https://jsfiddle.net/andrej_gajdos/zu11wk2o/37/">JSFiddle</a></h3>
<h2 id="installation">Installation</h2>
<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>
<h3 id="npm">NPM</h3>
<pre><code>$ npm install nested-datatables
</code></pre>
<h3 id="usage">Usage</h3>
<pre><code class="js">var table = new nestedTables.TableHierarchy('example', data, settings);
table.initializeTableHierarchy();
</code></pre>
<h2 id="methods">Methods</h2>
<h3 id="tablehierarchywrapperiddatasettings">TableHierarchy(wrapperID, data, settings)</h3>
<p>Main NestedTables constructor.</p>
<h4 id="wrapperid">wrapperID</h4>
<p>Type: <code>String</code></p>
<p>ID of a DOM element where will be table hierarchy rendered.</p>
<h4 id="data">data</h4>
<p>Type: <code>Array.<Object></code></p>
<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>
<p>Check examples below how to define json data.</p>
<h4 id="settings">settings</h4>
<p>Type: <code>Object</code></p>
<p>Settings for jQuery DataTables constructor.</p>
<h3 id=".initializetablehierarchy">.initializeTableHierarchy()</h3>
<p>Build nested table hierarchy.</p>
<h2 id="events">Events</h2>
<h4 id="onshowchildhierarchy">onShowChildHierarchy</h4>
<p>Triggered when a child hierarchy is shown</p>
<pre><code class="js">// '#example' is wrapper ID for table hierarchy
var tableEle = document.querySelector('#example .table');
tableEle.addEventListener('onShowChildHierarchy', function(e) {
console.log(e);
});
</code></pre>
<h4 id="onhidechildhierarchy">onHideChildHierarchy</h4>
<p>Triggered when a child hierarchy is hidden</p>
<pre><code class="js">// '#example' is wrapper ID for table hierarchy
var tableEle = document.querySelector('#example .table');
tableEle.addEventListener('onHideChildHierarchy', function(e) {
console.log(e);
});
</code></pre>
<h2 id="example">Example</h2>
<pre><code class="html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="./dist/nested.datatables.min.js"></script>
</head>
<body>
<div id="example" class="container"></div>
<script>
var dataInJson = [
{
data: {
name: 'b1',
street: 's1',
city: 'c1',
departments: 10,
offices: 15
},
kids: [
{
data: {
department: 'HR',
supervisor: 'Isidor Bristol',
floor: 1,
employees: 15
},
kids: [
{
data: {
name: 'Klement Nikodemos',
phone: '+938462',
hire_date: 'January 1, 2010',
id: 3456
},
kids: []
},
{
data: {
name: 'Madhava Helmuth',
phone: '+348902',
hire_date: 'May 23, 2002',
id: 1234
},
kids: []
},
{
data: {
name: 'Andria Jesse',
phone: '456123',
hire_date: 'October 23, 2011',
id: 9821
},
kids: []
}
]
},
{
data: {
department: 'development',
supervisor: 'Jim Linwood',
floor: 2,
employees: 18
},
kids: [
{
data: {
name: 'Origenes Maxwell',
phone: '345892',
hire_date: 'February 1, 2004',
id: 6234
},
kids: []
}
]
},
{
data: {
department: 'testing',
supervisor: 'Zekeriya Seok',
floor: 4,
employees: 11
},
kids: []
}
]
},
{
data: {
name: 'b2',
street: 's10',
city: 'c2',
departments: 3,
offices: 10
},
kids: [
{
data: {
department: 'development',
supervisor: 'Gallagher Howie',
floor: 8,
employees: 24
},
kids: [
{
data: {
name: 'Wat Dakota'
},
kids: []
}
]
},
{
data: {
department: 'testing',
supervisor: 'Shirley Gayle',
floor: 4,
employees: 11
},
kids: []
}
]
},
{
data: {
name: 'b3',
street: 's3',
city: 'c3',
departments: 2,
offices: 1
},
kids: [
{
data: {
department: 'development'
},
kids: [
{
data: {
name: 'Wat Dakota'
},
kids: []
}
]
},
{}
]
},
{
data: {
name: 'b4',
city: 'c4'
},
kids: []
}
];
var settings = {
iDisplayLength: 20,
bLengthChange: false,
bFilter: false,
bSort: false,
bInfo: false
};
var table = new nestedTables.TableHierarchy(
'example',
dataInJson,
settings
);
table.initializeTableHierarchy();
</script>
</body>
</html>
</code></pre>
<h2 id="example2">Example 2</h2>
<pre><code class="html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="./dist/nested.datatables.min.js"></script>
</head>
<body>
<div id="example" class="container"></div>
<script>
var dataInJson2 = [
{
data: {
date: '2018-08'
},
kids: [
{
data: {
' ':
'&lt;input type="checkbox" name="exampleCheckbox" value="exampleCheckbox"&gt;',
img:
'&lt;img src=https:\/\/picsum.photos\/100\/100 width=20 \/&gt;',
like: {
value: 47,
cellClass: 'likeCell',
headerClass: 'likeHeader'
},
perf: { value: 130.55555555555554, cellClass: 'perf' },
date: '2018-08-30'
},
kids: []
},
{
data: {
' ':
'&lt;input type="checkbox" name="exampleCheckbox2" value="exampleCheckbox2"&gt;',
img:
'&lt;img src=https:\/\/picsum.photos\/100\/100 width=20 \/&gt;',
like: 24,
perf: 66.66666666666667,
date: '2018-08-31'
},
kids: []
}
]
}
];
var settings = {
iDisplayLength: 20,
bLengthChange: false,
bFilter: false,
bSort: false,
bInfo: false
};
var table = new nestedTables.TableHierarchy(
'example',
dataInJson,
settings
);
table.initializeTableHierarchy();
</script>
</body>
</html>
</code></pre>
<h2 id="license">License</h2>
<p>MIT © <a href="http://andrejgajdos.com">Andrej Gajdos</a></p>
</body>
</html>