Child rows problem
Child rows problem
Hello,I am using Datatables 1.10. I am passing parameters eg. from date,to date to via ajax and on button click search results are displayed.
I have also used example at http://datatables.net/examples/api/row_details.html to display information.
My problem is when page is loaded for first time,rows are expanded successfully. but when I change parameter and click on search,result is displayed but click event is not working to show row details.When i again click on search button with same parameters ,event works.Please let me know why this is happening.
My Code is as follows:
$(document).ready(function() {
$("#btnSubmit").click(function(){
if ( $.fn.DataTable.isDataTable( '#records' ) ) {
var temp = $('#records').DataTable();
temp.destroy();
}
table = $('#records').DataTable( {
"jQueryUI": true,
"destroy": true,
"processing": true,
"responsive": true,
"autoWidth": true,
// "serverSide": true,
"order": [[ 1, "asc" ]],
"lengthMenu": [[15, 25, 50, -1], [15, 25, 50, "All"]],
"pageLength": 15,
"ajax": {
"url": "branchController",
"dataSrc": "records",
"type": "GET",
"data": function ( d ) {
d.action="list";
d.branch= $('#br').val();
d.frmdt = $("input#frDate").val();
d.todt = $("input#toDate").val();
d.status = $('#status').val();
}
} ,
"columnDefs": [
{
"targets": [-1 ],
"class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{
"targets": [ 0,1,2,3,5,6,8,9,10 ],
"class": 'alignment'
},
{
"targets": [7 ],
"class": 'alignmentright'
},
],
"createdRow": function ( row, data, index ) {
if ( data[10]=='D' ) {
$('td', row).eq(10).addClass('highlightgreen');
}
if ( data[10]=='P' ) {
$('td', row).eq(10).addClass('highlightamber');
}
if ( data[10]=='N' ) {
$('td', row).eq(10).addClass('highlightred');
}
}
});
table.on( 'order.dt search.dt', function () {
table.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
cell.innerHTML = i+1;
} );
} ).draw();
// $('#records tbody').on('click', 'td.details-control', function () {
$('#records tbody').on('click', 'tr td:last-child', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
var data = row.data();
if(data[10]=='N')
{
alert("No Details Available!")
}
else
{
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
if ( table.row( '.shown' ).length ) {
$('td.details-control', table.row( '.shown' ).node()).click();
}
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
}
} );
});
});