Show all visible child function

vinhtvu2

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');
        }
    } );

vinhtvu2

I changed a few things around, added the "drawCallback" to the initialization area, and hard coded it to filter being 1 or 2, then it would work like this.

Still not sure how to get it to go through a loop and using a .each and call the function in case I need to change it to more than 1 or 2 results for it to automatically populate the child.

But this is working, good enough for now.

Also, not sure why when there's one result, the class of the row would be odd, but when I set it to odd, it would just show "processing" forever because I am guessing it couldn't add a class to that since it couldn't find it. For some reason trying "even" worked.

        "drawCallback": function( settings ) {
            //This section checks to see if the table has been filtered
            var TableInfo = document.getElementById("Employee_Directory_info").innerHTML;
            if ((TableInfo.indexOf("filtered") > -1))
            {
                var TableInfoArray = TableInfo.split(" ");
                //If the filtered result is equal to 1 or 2.
                if (TableInfoArray[5] == 1)
                {
                    var tr = table.$('tr:even');
                    var row = table.row( tr );
                    row.child( format(row.data()) ).show();
                    tr.addClass('shown');
                }
                else if (TableInfoArray[5] == 2)
                {
                    //alert("Inside Function");
                    var tr = table.$('tr:odd');
                    var tr2 = table.$('tr:even');
                    var row = table.row( tr );
                    var row2 = table.row( tr2 );
                
                    row.child( format(row.data()) ).show();
                    row2.child( format(row2.data()) ).show();
                    tr.addClass('shown');
                    tr2.addClass('shown');
                }
            }