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);
                I could only add
var oTable = $('#employee-grid').DataTable();
                        Since you declared variable named oTable, you should stick to this variable name, not to table.
Therefor, use oTable.row instead of table.row.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With