Link to test case:
I use internal data to fill the table so I am not allowed to share a case.
Error messages shown:
tests_table.draw() is not a function
Description of problem:
Hi, I use child tables to show detailed informations of the respective parent row. I use two checkboxes to filter the parent table rows and it is working perfect. I do that by applying an attribute to every row depending on data I get.
I want to apply the same thing to the opened child table (I know that i cannot search/filter child tables when they are not open), but I always get the error, that I cannot draw the child table.
Screenshot of the Website for better understanding
The parent table ist filtered and in the state in which the site on the picture is I want the second row of the child table also not visible/filtered.
This is the code used to build the tables.
var build_table = $('#build_table').DataTable({
"ajax":{
"type": "post",
"data": {'post_release': release_value, 'post_responsible': responsible_value},
"url":"get_init.php", //Alternative get.php
"dataSrc" : ""
},
paging: false,
autoWidth: true,
columns: [{
className: 'term-details-control',
orderable: false,
data: null,
defaultContent: '<img src="https://pics.freeicons.io/uploads/icons/png/9322424801588529853-24.png">'
},
{ data: "WDM_GMRE" },
{ data: "OCS_GMRE" },
{ data: "PSIM_GMRE" },
{ data: "WDM_NE" },
{ data: "OCS_NE" },
{ data: "PSIM_NE" },
{ data: "tests_total" ,
render: function ( data, type, row ) {
if (row.tests_failed > 2) {
return '<span class="dot" style="height: 20px; width: 20px; background-color: red; border-radius: 25%; display: inline-block;"></span> ' + data + " / " + row.tests_passed + " / " + row.tests_failed;
} else {
return '<span class="dot" style="height: 20px; width: 20px; background-color: green; border-radius: 25%; display: inline-block;"></span> ' + data + " / " + row.tests_passed + " / " + row.tests_failed;
}
}
},
{ data: "WDM_tests" ,
render: function ( data, type, row) {
return data;
}
},
{ data: "MRN_tests" ,
render: function ( data, type, row) {
return data;
}
},
{ data: "green_succ",
render: function ( data, type, row ) {
return data + '% successfull'
}
},
{ data: "ess_succ",
render: function ( data, type, row ) {
return '<progress value="' + data + '" max="100"></progress>'
}
}
],
"columnDefs": [
{ "searchable": true, "targets": 1 }
],
rowId: 'PK_comb_ID',
createdRow: function (tr, data) {
if ( data.b_SIM && data.b_HW == 1 ) {
$(tr).attr('banned', '0');
} else if (data.b_SIM == 1) {
$(tr).attr('banned', '1');
} else {
$(tr).attr('banned', '2')
}
},
order: [
[1, 'desc']
]
});
//Filter parent table
$('.filter_type').on('change', function() {
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
if ($('#check4').prop('checked') && $('#check5').prop('checked')) {
return $(build_table.row(dataIndex).node()).attr('banned');
} else if ($('#check4').prop('checked')) {
return $(build_table.row(dataIndex).node()).attr('banned') == 0 || $(build_table.row(dataIndex).node()).attr('banned') == 2;
} else if ($('#check5').prop('checked')) {
return $(build_table.row(dataIndex).node()).attr('banned') == 0 || $(build_table.row(dataIndex).node()).attr('banned') == 1;
}
}
);
build_table.draw();
$.fn.dataTable.ext.search.pop();
})
// Add event listener for opening and closing details
$('#build_table tbody').on('click', 'td.term-details-control', function() {
var tr = $(this).closest('tr');
var row = build_table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
$('.odd img, .even img').attr('src', 'https://pics.freeicons.io/uploads/icons/png/9322424801588529853-24.png');
} else {
// Open this row
var te = $(this).closest('tr').attr('id');
row.child(formatTerm(te)).show();
tr.addClass('shown');
$('.odd.shown img, .even.shown img').attr('src', 'https://pics.freeicons.io/uploads/icons/png/6275201171582779176-20.png');
var tests_table = $('#tests_table' + te).dataTable({
dom: 'Qfrtip',
"ajax":{
"type": "post",
"data": {'post_release': release_value, 'post_id': te},
"url":"get.php",
"dataSrc" : ""
},
paging: false,
searching: true,
columns: [{
orderable: true,
defaultContent: ''
},
{ data: "test_name" ,
render: function ( data, type, row) {
return '<a target="_blank" href="' + row.test_url + '">' + data + '</a>';
}
},
{ data: "CSL" },
{ data: "tests_total" },
{ data: "tests_passed" },
{ data: "tests_failed" },
{ data: "Test_Datetime" }
],
createdRow: function (tr, data) {
if ( data.b_Green == 1 ) {
$(tr).addClass('green');
}
},
createdRow: function (tr, data) {
if ( data.b_SIM == 1 ) {
$(tr).attr('banned_', '1');
} else {
$(tr).attr('banned_', '0');
}
},
order: [
[6, 'desc']
]
})
});
counter += 1;
//Try to filter the child table(s) but with this getting the error "tests_table.draw(); not a function"
$('.filter_type').on('change', function() {
$.fn.dataTable.ext.search.push(
function(settings, data2, dataIndex) {
if ($('#check4').prop('checked') && $('#check5').prop('checked')) {
return $(tests_table.row(dataIndex).node()).attr('banned_');
} else if ($('#check4').prop('checked')) {
return $(tests_table.row(dataIndex).node()).attr('banned_') == 0;
} else if ($('#check5').prop('checked')) {
return $(tests_table.row(dataIndex).node()).attr('banned_') == 1;
}
}
);
tests_table.draw();
$.fn.dataTable.ext.search.pop();
}
});
}
function formatTerm(table_id) {
return '<table class="child_table" id="tests_table' + table_id + '">' +
'<thead><tr><th></th><th>Test Name</th><th>Responsible</th><th>Tests Total</th><th>Tests Passed</th><th>Tests Failed</th><th>Datetime</th></tr></thead></table>';
}
If this way of filtering is possible in any way, I am looking forward to any help.