Clash Royale CLAN TAG#URR8PPP

Datatable rebind issue with expand collapse click

I was trying to display nested static table from main datatable source but when i rebind that table then expand collapse event is not working. In debugging its working fine but its not appending details to the row.

I have created js fiddle which is not working. It would be great if someone identified what is wrong in this.

http://jsfiddle.net/yogesh078/j5a390d9/41/

Sequence to check what is not working.

1.Click on Search button at the top It will populate the data in datatable
2.Now click on click which is first td of table which will show nested details of row
3. Now again click on search link at top which will bind result ( In my case it is search with different parameter)
4. Now click on click which is first td now its not expanding and collapsing This is the issue i am facing.

I have tried below things:
Removed destroy and destroyed datatable still no luck
debugger is going to last event but data is not appending to the tr

<a style="background-color:blue; color:white" onclick="reaload();">Search</a>

<table id="MeterDataTable" class="display dataTable table table-striped no-footer dtr-inline collapsed" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>meter</th>
<th>id</th>
<th>desc</th>
</tr>
</thead>
<tfoot>
<tr>
<th>meter</th>
<th>id</th>
<th>desc</th>
</tr>
</tfoot>
</table>

<script>


var lstTable;
function reaload()
var dataset = [
['test', '15', 'testDesc'],
];

lstTable = $('#MeterDataTable').DataTable(

//"ajax": 'DataTables-1.10.7/examples/ajax/data/meterDataJsonDown.txt',
"data": dataset,
destroy: true,
"columns": [

"className": 'text-center table-cell fa fa-plus',
"orderable": false,
"width": "15px",
"data": null,
"defaultContent": ''
,
"title": "meter" ,
"title": "id"
]
);


//Below function will expand details on click of plus
$('#MeterDataTable tbody').on('click', 'td.fa.fa-plus', function ()
var tr = $(this).closest('tr');
var row = lstTable.row(tr);
if (row.child.isShown())
row.child.hide();
tr.removeClass('shown');

else
var td = row.child(GetChildTable(row.data()), "left-space").show();
tr.addClass('shown');

);




function GetChildTable(d)
var html = '<table class="child-lst no-margin table table-bordered">' +
'<thead><tr><td>Code/Package</td><td>Description</td><td>Q</td><td> Code</td><td>Description</td></tr></thead> <tbody>';

html = html + " </tbody></table>";
return html;


</script>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.