Skip to content

Instantly share code, notes, and snippets.

@RaduW

RaduW/MasterDetailTest.html

Last active August 29, 2015 13:55
Show Gist options
  • Save RaduW/8721730 to your computer and use it in GitHub Desktop.
Save RaduW/8721730 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
MasterDetailTest.html
<!DOCTYPE html>
<html>
<head>
<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 width="100%" id="theTable"></table>
</div>
</body>
</html>
Raw
MasterDetailTest.js
/**
* Created by RaduW on 29/01/14.
*/
(function(){
"use strict";
var contentSwitch = true;
var theTable = null;
function nop(){return "";}
function onRowCreated(nRow,aData, iDataIndex)
{
if( aData.type=="monitor")
{
}
console.log(nRow,aData,iDataIndex);
}
var configMaster = {
sDom: ".test t<p>",
sPaginationType: "full_numbers",
bSort: false,
aoColumns: [
{'sTitle': 'Monitor', bSortable: true, mData:'name'}// , fnCreatedRow:onMasterRowCreated}
]
};
var configDetail = {
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'}
{ mData:'name'},
{ mData:'title'},
{ 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()
{
configMaster.aaData = data;
theTable = $('#theTable').dataTable(configMaster);
$('#theTable tbody tr').click( function () {
var currentRow = this;
if ( theTable.fnIsOpen(currentRow) ) {
theTable.fnClose( currentRow );
}
else {
var theNewRow = theTable.fnOpen( currentRow, "<table></table>" );
var rowData = theTable.fnGetData(currentRow);
var detailData = rowData.content;
configDetail.aaData = detailData;
var detailTable = $('table', theNewRow);
detailTable.dataTable(configDetail);
}
} );
}
function onReady()
{
initTable();
}
$(document).ready(onReady);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment