Skip to content

Instantly share code, notes, and snippets.

@RaduW

RaduW/jsbin.iwimuNO.html

Created January 31, 2014 10:28
Show Gist options
  • Save RaduW/8729731 to your computer and use it in GitHub Desktop.
Save RaduW/8729731 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.iwimuNO.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<meta name="description" content="Master Detail DataTables" />
<meta charset=utf-8 />
<title>Master Detail Data Tables</title>
</head>
<body>
<div>
<table class='table' width="100%" id="table1"></table>
</div>
<div>
<table width="100%" id="table2"></table>
</div>
</body>
</html>
Raw
jsbin.iwimuNO.js
/**
* Created by RaduW on 29/01/14.
*/
(function(){
"use strict";
var configMaster = {
sDom: ".test t<p>",
sPaginationType: "full_numbers",
bSort: false,
aoColumns: [
{'sTitle': 'Monitor', bSortable: true, mData:'name'}
]
};
var configDetail1 = {
sDom: "t",
sPaginationType: "full_numbers",
bSort: false,
aoColumns: [
{ mData:'name'},
{ mData:'title'},
{ mData:'type'}
]
};
var configDetail2 = {
sDom: "t",
sPaginationType: "full_numbers",
bSort: false,
aoColumns: [
{'sTitle': 'Name', bSortable: true, mData:'name'},
{'sTitle': 'Title', bSortable: true, mData:'title'},
{'sTitle': 'Type', bSortable: true, mData:'type'}
]
};
var data = [
{name: 'Mo 1/1990', id: 1, type:'monitor',
content:[
{ name: "Doc 1", title: "Legea 1", type:'document'},
{ name: "Doc 2", title: "Legea 2", type:'document'},
{ name: "Doc 3", title: "Legea 3", type:'document'}
]
},
{name: 'Mo 2/1991', id: 2, type:'monitor',
content:[
{ name: "Doc 21", title: "Legea 21", type:'document'},
{ name: "Doc 22", title: "Legea 22", type:'document'},
{ name: "Doc 23", title: "Legea 23", type:'document'}
]
},
{name: 'Mo 3/1991', id: 3, type:'monitor',
content:[
{ name: "Doc 31", title: "Legea 31", type:'document'},
{ name: "Doc 32", title: "Legea 32", type:'document'},
{ name: "Doc 33", title: "Legea 33", type:'document'}
]
}
];
function initTable(tableName, configDetail)
{
configMaster.aaData = data;
var theTable = $(tableName).dataTable(configMaster);
$(tableName+' tbody tr').click( function () {
var currentRow = this;
if ( theTable.fnIsOpen(currentRow) ) {
var nextRow = $(currentRow).next();
var rowTable = $('table',nextRow).dataTable();
if ( rowTable)
rowTable.fnDestroy();
theTable.fnClose( currentRow );
}
else {
var theNewRow = theTable.fnOpen( currentRow, "<table class='table'></table>" );
var rowData = theTable.fnGetData(currentRow);
var detailData = rowData.content;
configDetail.aaData = detailData;
var detailTable = $('table', theNewRow);
detailTable.dataTable(configDetail);
}
} );
}
function onReady()
{
initTable('#table1', configDetail1 );
initTable('#table2', configDetail2 );
}
$(document).ready(onReady);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment