Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

with DataTable - Uncaught ReferenceError: table is not defined

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

enter image description here

<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);
like image 449
Will Avatar asked Dec 23 '22 14:12

Will


2 Answers

I could only add

var oTable = $('#employee-grid').DataTable();
like image 182
Will Avatar answered Dec 26 '22 02:12

Will


Since you declared variable named oTable, you should stick to this variable name, not to table.

Therefor, use oTable.row instead of table.row.

like image 23
Fikret Pasovic Avatar answered Dec 26 '22 04:12

Fikret Pasovic