with DataTable - Uncaught ReferenceError: table is not defined

Question

I have the following script, was already working perfectly, then the need arose to put a second level in each record of the table. In the first column I have a button that when clicked will open the details of that record, just like the one in the image below

<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        console.log("Entrou na função");
        console.log("Versão DataTable=" + $.fn.dataTable.version);


        //init the table
        var dataTable = $('#employee-grid').DataTable({
            "language": {
                "url": "https://cdn.datatables.net/plug-ins/1.10.12/i18n/Portuguese-Brasil.json"
            },
            "columnDefs": [{
                className: "details-control",
                "targets": [0]
            }],


            //********************      
            //"destroy": true,                  
            "processing": true,
            "serverSide": true,
            "ajax": {
                url: "phpmysql_serverside.php", // json datasource
                type: "post", // method  , by default get
                error: function() { // error handling
                    $(".employee-grid-error").html("");
                    $("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">Sem registros</th></tr></tbody>');
                    $("#employee-grid_processing").css("display", "none");

                }
            }


        });

        var oTable;
        oTable = $('#employee-grid').DataTable();
        $('#aplicativos').change(function() {
            if ($(this).find("option:selected").text() === "Escolha um APP")
                oTable.fnFilter('');
            else
                oTable.fnFilter($(this).find("option:selected").text());
        });


        // Add event listener for opening and closing details
        $('#employee-grid tbody').on('click', 'td.details-control', function() {
            console.log("Click");
            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');
            }
        });
    });

    /* Formatting function for row details - modify as you need */
    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>Full name:</td>' +
            '<td>' + d.name + '</td>' +
            '</tr>' +
            '<tr>' +
            '<td>Extension number:</td>' +
            '<td>' + d.extn + '</td>' +
            '</tr>' +
            '<tr>' +
            '<td>Extra info:</td>' +
            '<td>And any further details here (images etc)...</td>' +
            '</tr>' +
            '</table>';
    }
</script>

I added the following code when clicking on the first column of the tab. Open a secondary record. But you're giving this error I've tried everything and I do not think the problem

// Add event listener for opening and closing details
$('#employee-grid tbody').on('click', 'td.details-control', function() {
    console.log("Click");
    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');
    }
});

Clicking the button displays the following message:

Uncaught ReferenceError: table is not defined

EDIT The error happens here

Var row = table.row (tr);

Answer 1

I could only add

var oTable = $('#employee-grid').DataTable();