row.child() displaying header without data
row.child() displaying header without data
After initializing the table with dummy data and adding the row.child() which works perfectly fine with no errors, the data in the row.child() is not appearing, you can clearly see the row headers however the data included for each is shown as undefined .. i cannot seem to get any leads on how to solve my issue, Im using an sql database to draw the data out and the datatable works fine with inline editing and etc its just the row child is not showing data only the names of the rows.
<script src="~/Scripts/jquery-2.1.4.js"></script>
<script src="~/scripts/jqueryui/jquery-ui.js"></script>
<script src="~/scripts/datatables/jquery.datatables.js"></script>
<script src="~/scripts/jquery.jeditable.js"></script>
<script src="~/scripts/datatables/jquery.datatables.editable.js"></script>
<script src="~/scripts/jquery.validate.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/scripts/jquery.jeditable.datepicker.js"></script>
<script language="javascript" type="text/javascript">
function format(d) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
'<tr>'+
'<td>Site Coordinates</td>'+
'<td align="center">'+
d.Site_Name +
'</td>'+
'</tr>'+
'<tr>'+
'<td>Governorate </td>'+
'<td align="center">'+
d.Governorate +
'</td>'+
'</tr>'+
'<tr>'+
'<td>Caza</td>'+
'<td align="center">'+
d.Caza+
'</td>'+
'</tr>'+
'<tr>'+
'<td>Owner Type</td>'+
'<td align="center">'+
d.Owner_Type +
'</td>'+
'</tr>'+
'<tr>'+
'<td>Lease Contract Renewal Date</td>'+
'<td align="center">'+
d.Lease_Contract_Renewal_Date +
'</td>'+
'</tr>'+
'</table>';
}
$(document).ready(function ()
{
$('#myDataTable thead tr#filterrow th').each(function () {
var title = $('#myDataTable thead th').eq($(this).index()).text();
$(this).html('<input type="text" onclick="stopPropagation(event);" placeholder="Search ' + title + '""style="direction: ltr; text-align:left;" />');
});
$("#myDataTable thead input").on('keyup change', function () {
table
.column($(this).parent().index() + ':visible')
.search(this.value)
.draw();
});
var table = $('#myDataTable').DataTable({
//"scrollY": "200",
"scroller": "true",
"deferRender": "true",
"orderCellsTop": "true",
"columnDefs":
[
{ "visible": false, "targets": 1 },
{
"className": 'details-control', "targets": 0
},
{
"orderable": false, "targets": 0
}
],
"order": [[1, 'asc']],
"displayLength": 100,
"drawCallback": function (settings)
{
var api = this.api();
var rows = api.rows({ page: 'current' }).nodes();
var last = null;
api.column(1, { page: 'current' }).data().each(function (group, i) {
if (last !== group) {
$(rows).eq(i).before(
'<tr class="group"><td colspan="91">' + group + '</td></tr>'
);
last = group;
}
});
}
});
//Added search and filter capabilities to the table
$('#myDataTable').dataTable().makeEditable(
{
"aoColumns":
//Added the columns for main table.
// Add event listener for opening and closing details
$('#myDataTable tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child(format(row.data())).show();
tr.addClass('shown');
}
});
});
function stopPropagation(evt) {
if (evt.stopPropagation !== undefined) {
evt.stopPropagation();
} else {
evt.cancelBubble = true;
}
}
</script>
</body>
</html>