jquery.dataTables.min.js:62 Uncaught TypeError: Cannot read property 'style' of undefined

george001

Hello,

I am getting this error message every time I am reloading the data on a datatable for more than 1 time. I am filling the datatable using a database but each time the data are reloaded (filtering them using queries to get specific values from a db) for more than one time I get this error message. 1st time i reload them it's fine but one the 2nd time it crashes. Also, every time I reload the data I .destroy() the previous table and re instantiate it again.

jquery.dataTables.min.js:62 Uncaught TypeError: Cannot read property 'style' of undefined
    at Ea (jquery.dataTables.min.js:62)
    at Y (jquery.dataTables.min.js:13)
    at s.<anonymous> (jquery.dataTables.min.js:126)
    at s.iterator (jquery.dataTables.min.js:99)
    at s.<anonymous> (jquery.dataTables.min.js:126)
    at Function.adjust (jquery.dataTables.min.js:102)
    at s.<anonymous> (jquery.dataTables.min.js:125)
    at s.visible (jquery.dataTables.min.js:102)
    at s.<anonymous> (jquery.dataTables.min.js:137)
    at s.iterator (jquery.dataTables.min.js:99)

this is how i declare the datatable

$('#example').DataTable({
            //rows per page
            "lengthMenu": [
                [25, 50, 100, 150, 200, 250, -1],
                [25, 50, 100, 150, 200, 250, "All"]
            ],
            "dom": '<"top"Bfi>rt<"bottom"lp><"clear">', //show entries on bottom
            //Scrolling table
            "scrollY": 500, //Constrain the DataTable to the given height
            "deferRender": true, //Elements will be created only when the are required
            "scroller": true, //Enable vertical scrolling in DataTables.
            // "scrollX": true,//scroll horizontal 
            "colReorder": true, // column reordering
            "buttons": [
                'colvis'

            ],
            //Grouping table 
            "columnDefs": [ //mades target column hidden 
                { "visible": false, "targets": 2 }
            ],
            "order": [
                [2, 'asc'] //sorting based on column
            ],
            "drawCallback": function(settings) { //DataTables' callback function
                var api = this.api(); //give an API instance
                var rows = api.rows({ page: 'current' }).nodes(); //Get the row TR node for the selected row. for current page

                var last = null; //last cell's data that was checked

                var groupName = []; //array for holding the sorting values

                //loops through each cell of column 2 and gets the data of each one
                api.column(2, { page: 'current' }).data().each(function(group, i) {

                    if (last !== group) { ////checds if last cell's data is the same as previous 
                        //counts the rows(i) and adds the group name (i = number of rows, group is the name of each group)
                        $(rows).eq(i).before(
                            '<tr class="group" id="' + i + '"><td colspan="5">' + group + '</td></tr>'
                        );
                        groupName.push(i); //push the group's id in the array
                        last = group; //sets the last var to the name of the group that was just checked
                    }
                });
                //iterates through the array
                for (var d = 0; d < groupName.length; d++) {
                    // Code added for adding class to sibling elements as "group_<id>"  
                    $("#" + groupName[d]).nextUntil("#" + groupName[d + 1]).addClass(' group_' + groupName[d]);
                    // Code added for adding Toggle functionality for each group
                    $("#" + groupName[d]).click(function() {
                        var gid = $(this).attr("id");
                        $(".group_" + gid).slideToggle(300);
                    });
                }
            }
        });

allan

Thanks for your question - however, per the forum rules can you link to a test case showing the issue please. This will allow the issue to be debugged.

Information on how to create a test page, if you can't provide a link to your own page can be found here.

My guess is that your HTML doesn't have three columns. It might have 2, 4 or something else.

Thanks,
Allan

george001

Hello,

I found out what the problem was. It was that I was hiding one of the columns using "columnDefs": [
{ "visible": false, "targets": 0 }
]