fnDestroy Error when trying to reset a table with invisible columns

fnDestroy Error when trying to reset a table with invisible columns

matthias62matthias62 Posts: 1Questions: 1Answers: 0

Hello,

I must reset a table and fill it with new content in my application. That worked by using fnDestroy after which the table
could be re-initialized. After I introduced columns with the property visible:false that did not longer work. fnDestroy does not return and Chrome and Firefox produce an error message in jQuery. Just the Chrome message:

Uncaught type error: Cannot read property "style" of undefined

The version of jQuery is 1.11.11 and of dataTables 1.10.7. Chrome and Firefox are the latest versions.

I stripped off everything which is not relevant from my app and have this skeleton. The error just occurs when I add additionally the scrollY property during the table initialization.

<!DOCTYPE html>
<html>
<head>

   .... get dataTables/jQuery from CDN



<script>    
    var TestTable = null;

    function Init() {
        if (TestTable) {
            $('#idTestTable').dataTable().fnDestroy();          

            // this code never gets executed
            // the error just happens if scrollY option is set and at least one column is not visible
            TestTable = null;
            console.log("arrived");
        };

        TestTable = $('#idTestTable').DataTable({
            "scrollY" : "200px",                        
            "columns" : [
                            {"width": "80px"},
                            {"visible": false, "orderable": false}      
                        ]
        });     
    };
</script>

</head>

<body>
<button onclick="Init();" >Init</button>

<table id="idTestTable" class="display compact">
    <thead>
        <tr>                
            <th style="padding:5px;">ID</th>
            <th style="padding:5px;">Hidden</th>        
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>    

</body>
</html>

This discussion has been closed.