I'm working on creating a datatable that has a drill down (row details) sub datatable as per the requirement. I was able to create the sub datatable when using drill down (row details) approach, but finding it hard to expand all of these rows that have drill down associated while loading the table. Here is the code I have and it works and expands all drill down rows on the current paginated table., but when clicking on the next pagination (number or page), the rows shows as expand (you know you can see the 'minus' (close) icon image) but no sub datatable. As far as I understood, its because, when I'm trying to simulate a click on the 'img' attribute associated for a drill down row, its being applied successfully for the current rows in the current page, but for the rest, which are not in the dom, the script says that the sub datatable is undefined. Any ideas or suggestions around this would help me a lot..
Below is the code snippet -
Table HTML source code -
<table id="mastertable" class="table table-striped table-bordered table-hover dataTable" aria-describedby="sample-table-2_info">
<thead>
<tr role="row">
<!-- <th class="sorting" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="Domain: activate to sort column ascending" style="width: 255px;"></th> -->
<th class="sorting" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="Domain: activate to sort column ascending" style="width: 25%;">Project Name</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="Price: activate to sort column ascending" style="width: 10%;">Status</th>
<th class="hidden-480 sorting" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="Clicks: activate to sort column ascending" style="width: 10%;">Start Date</th>
<th class="hidden-480 sorting" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="Clicks: activate to sort column ascending" style="width: 10%;">End Date</th>
<th class="hidden-480 sorting" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="Clicks: activate to sort column ascending" style="width: 10%;">FCS Date</th>
<th class="hidden-480 sorting" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="Clicks: activate to sort column ascending" style="width: 10%;">Project Phase</th>
<th class="hidden-480 sorting" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" aria-label="Clicks: activate to sort column ascending" style="width: 15%;">Defects</th>
</tr>
</thead>
<tbody role="alert" aria-live="polite" aria-relevant="all">
<tr>
<td class=" ">
<img src="/tester/theme/v_1_0/app-images/details_open.png" masterProject="master-ROORKELA"/>
<a href="/tester/dashboard/project/abc">ROORKELA </a> <font color="black">(System Project)</font>
// THIS IS THE SUB DATATABLE HIDDEN IN DIV AND THE ID OF THE DIV IS STORED IN THE IMG ATTRIBUTE ABOVE UNDER THE 'masterProject' attribute - [masterProject="master-ROORKELA"]
<div class="hide" id="master-ROORKELA">
<table id="subProjects-table" class="table table-striped table-bordered table-hover subTable" aria-describedby="sample-table-2_info">
<thead>
<tr role="row">
<th class="sorting" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" style="width: 255px;">Project Name</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" style="width: 186px;">Status</th>
<th class="hidden-480 sorting" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" style="width: 203px;">Start Date</th>
<th class="hidden-480 sorting" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" style="width: 203px;">End Date</th>
<th class="hidden-480 sorting" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" style="width: 203px;">Targetted Date</th>
<th class="hidden-480 sorting" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" style="width: 203px;">Project Phase</th>
<th class="hidden-480 sorting" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1" style="width: 203px;">Defects</th>
</tr>
</thead>
<tbody role="alert" aria-live="polite" aria-relevant="all">
<tr>
<td class=" " style="width: 26%;text-align:center;vertical-align: middle;">
<a href="/tester/dashboard/project/abc">Sirish</a>
</td>
<td class="hidden-480 " style="width: 10%;">
<span class="label label-sm label-warning">Minor Impact</span>
</td>
<td class=" " style="width: 10%;">Feb 12 2013</td>
<td class="hidden-480 " style="width: 10%;">Nov 12 2013</td>
<td class=" " style="width: 10%;">Jan 16 2014</td>
<td class=" " style="width: 10%;">EFT</td>
<td class=" " style="width: 15%;">
<a href="/tester/dashboard/project/abc/defects.html" class="modal-link" data-toggle="modal" data-target="#displayDefects">22 defects</a>
</tr>
</tbody>
</table>
</div>
</td>
<td class="hidden-480 ">
<span class="label label-sm label-warning">Minor Impact</span>
</td>
<td class=" ">Feb 12 2013</td>
<td class="hidden-480 ">Nov 12 2013</td>
<td class=" ">Jan 16 2014</td>
<td class=" ">TESTING</td>
<td class=" "><a href="/tester/dashboard/project/abc/defects.html" class="modal-link" data-toggle="modal" data-target="#displayDefects">22 defects</a>
</tr>
</tbody>
</table>
Defining the initial table -
var oTable = $('#mastertable').dataTable( {
"aLengthMenu": [[5,10, 25, 50, 100 , -1], [5,10, 25, 50, 100, "All"]],
"iDisplayLength" : 10,
"aoColumnDefs": [
{"sWidth": "25%", "aTargets": [ 0 ] },
{"sWidth": "10%", "aTargets": [ 1 ] },
{"sWidth": "10%", "aTargets": [ 2 ] },
{"sWidth": "10%", "aTargets": [ 3 ] },
{"sWidth": "10%", "aTargets": [ 4 ] },
{"sWidth": "10%", "aTargets": [ 5 ] },
{"sWidth": "15%", "aTargets": [ 6 ] },
{"sClass": "align-left" , "aTargets": [ 0,1,4, 2,3,5,6] }
],
"sDom": '<"row"<"col-sm-4"l><"col-sm-6"f><"col-sm-1 saveas_div"T><"col-sm-1 filtering_div"C>r>t<"row"<"col-sm-6"i><"col-sm-6"p>>',
"oTableTools": {
"aButtons": [
{
"sExtends": 'csv',
"sButtonText":'Export as CSV',
"mColumns":"visible"
}
]
},
"aoColumns": [
{ "bSortable": true },
null, null, null,null, null,
{ "bSortable": true }
],
"bStateSave": true,
"fnStateSave": function (oSettings, oData) {
localStorage.setItem( 'DataTables_'+window.location.pathname, JSON.stringify(oData) );
},
"fnStateLoad": function (oSettings) {
return JSON.parse( localStorage.getItem('DataTables_'+window.location.pathname) );
}
});
Associating click events on the 'img' attributes in the table -
oTable.$('td').each( function () {
$(this).on('click','img', function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
this.src = "${pageContext.request.contextPath}/theme/v_1_0/app-images/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "${pageContext.request.contextPath}/theme/v_1_0/app-images/details_close.png";
var masterProject = $(this).attr("masterProject");
var html = $("#"+masterProject).html();
console.log(html); // THIS IS WHERE I SEE AS UNDEFINED FOR HIDDEN TR ELEMENTS WHICH ARE HIDDEN DURING PAGINATION
oTable.fnOpen(nTr, html, 'details');
}
} );
$(this).find('img').trigger('click'); // THIS IS WHERE I"M SIMULATING CLICK EVENT TO EXPAND ALL ROWS WHILE LOADING PAGE BY DEFAULT.
});
I tried using the - fnDrawCallback method to simulate the click events, but its giving me weird results, meaning rows are expanded on alternate pages like 1,3,5 but on consecutive pages.
Sorry for this monologue, as am just trying to explain the detail of the problem.
Please pass on your valuable suggestions or solutions..
Many thanks,
Sirish.