I wrote a function that would show all of the child table element, when the search filtered is return, and resulting in under 3 resulted listing. For some reason, it's going through this section multiple times, and closing the child item.
Also, it does not work at all when there are more than 1 results returning.
I'm pretty certain it's something very simple right now, but I've been trying at it for a whole day, and just hoping someone else can take a look and maybe see my error.
Thanks!
Table Initiation:
var table = $('#Employee_Directory').DataTable( {
"processing": true,
"bPaginate": true,
"serverSide": true,
"lengthMenu": [ [15, 30, 45, -1], [15, 30, 45, "All"] ],
"oLanguage": {
"sSearch": "Search: "
},
searchHighlight: true,
"ajax": {
"url": "../directory/get_employee.php",
"type": "POST"},
"columns":
[
{
"className":'Last-Name',
"data": "LastName" },
{ "data": "FirstName" },
{
"data": "Department",
"orderable": false
},
{
"data": "Title",
"orderable": true
}
],
"order": [[0, 'asc']]
} );
The event listener:
//Event listener for search box
$('#Employee_Directory_filter input').on('keyup change', function() {
//When search input is used, clear the department selection dropbox
document.getElementById("Department_Selection").value = '""';
document.getElementById("Department_Selection").selectedIndex = '0';
$("#Department_Selection").change();
//alert(this.value);
table.search(this.value);
//This section checks to see if the table has been filtered
var TableInfo = document.getElementById("Employee_Directory_info").innerHTML;
if ((TableInfo.indexOf("filtered") > -1))
{
//alert("table filtered");
var TableInfoArray = TableInfo.split(" ");
if (TableInfoArray[5] < 3) //If filtered result is under 3, automatically show child table.
{
//alert("Inside Function");
$('#Employee_Directory tr').each(function(index,value) {
alert("Inside Each Function");
//Check to see if child is shown or not
if(!table.row(this.index).child.isShown())
{
alert("Inside Last IF");
var tablerow = this.index;
var thisrow = table.row( tablerow );
thisrow.child( format(thisrow.data()) ).show();
}
});
}
}
table.draw();
});
// Add event listener for opening and closing details
$('#Employee_Directory tbody').on('click', 'tr', 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');
}
} );