Why Datatables is trowing error "Cannot read property 'aDataSort' of undefined" when i destroy old i

cgc

When my datatable is initialized for the first time it works everything well. Then i need to reinitialize the table to populate with the new data it throws error "Cannot read property 'aDataSort' of undefined". Here is my code:

      initDt( pT, pOptions ) {

            if ( $.fn.dataTable.isDataTable( pT ) ) {
                $( pT ).DataTable().destroy();
                let table = $( pT ).DataTable( {
                    dom: 'Bfrtip',
                    responsive: true,
                    paging: true,
                    buttons: [
                            'copy', 'csv', 'excel', 'pdf', 'print'
                    ],
                    "scrollY": "320px"
                } );
            } else {

                let table = $( pT ).DataTable( {
                    dom: 'Bfrtip',
                    responsive: true,
                    paging: true,
                    buttons: [
                            'copy', 'csv', 'excel', 'pdf', 'print'
                    ],
                    "scrollY": "320px"
                } );
            }
        }

I've also tried to pass destroy: true in the options but the error appears the same.

The table is destroyed, when i initialize it again its when the error is being thrown.

How can i solve this?

kthorngren

I tried your code here:
http://live.datatables.net/jususoge/1/edit

It seems to work. Interestingly if I use $( pT ).empty() after the destroy I get the same error. So it seems the table is not properly built before reinitializing. IF this doesn't help then a link to your page or a test case replicating the issue will be needed to help troubleshoot.

Kevin

kthorngren

After thinking about it a bit.... If you are removing the table you will probably want to destroy() it first to remove all the Datatables listeners etc then remove the table.

Kevin

cgc

Maybe i should have posted this on my question but pT is a string containing "#myTableId".

I'm a bit confused, so what should i need to change on my code?

Also, this is what i have included in my html to use datatables:

<!-- Datatables Css -->
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">

<!-- Datatables Js -->
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/b-1.5.4/b-html5-1.5.4/b-print-1.5.4/r-2.2.2/datatables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.4/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.4/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.4/js/buttons.print.min.js"></script>

kthorngren

The Datatable code, as you posted it, is working. I was trying to point out that something is happening elsewhere in your code that is not allowing Datatables to initialize.

How are you adding the new data? What are you doing with the table to remove the old data? Is the new table in correct HTML format?

Without seeing what you are doing outside of the code snippet above there isn't much help we can provide. Can you provide a test case so we can help?

Kevin

cgc

After a couple more hours debugging, i've discovered the problem. I had my functions wrapped inside an object like this:

const datatableManager = {

    initDt( pT, pOptions ) {
     //...
    },
    populateDt( pT, pData ) {
         //...
    }

}; //globObjKdatatable

In this case i was just calling the functions like initDt('#myTable');

Then i tested with plain declared methods like this:

     function initDt( pT, pOptions ) {
           //...
        }

    function populateDt( pT, pData ) {
             //...
        }

And it worked. Not sure why this happened.