error on re-draw

montoyam

I have a very interesting issue. I have a checkmark where the user can select what data they want in the DataTable. On inital page load and check/uncheck action, I call the following:

var CallManagerUnmatchedDataTable;
        function DynamicTablesLoad() {

            var hideDetails = $('#Unmatched_toggle').prop("checked") == true ? 1 : 0;
            $.ajax({
                url: "api/CallManagerUnmatched?hideDetail=" + hideDetails,
                success: function (data) {
                    var columns = [];
                    if (data.length !== 0) {
                        //build the DataTable dynamically.
                        columnNames = Object.keys(data.Table[0]); //.Table[0]] refers to the propery name of the returned json
                        for (var i in columnNames) {
                            columns.push({
                                data: columnNames[i],
                                title: columnNames[i]
                            });
                        }
                    }

                    CallManagerUnmatchedDataTable = $('#CallManagerUnmatched').DataTable({
                        dom: '<"UnmatchedNotInSearch">frtip',
                        destroy: true,
                        data: data.Table,
                        rowId: 'CM_ID',
                        scrollX: true,
                        columns: columns
                    })
                }

            });
     }

If I change line 4 to: var hideDetails =0; or var hideDetails = 1; I can click the checkbox all day long and get no errors. Of course the dataset doesn't change because a zero or one is hardcoded. But, when I use the code in line 4 I get an error. The ajax returns the correct data (detail when 0, summary data when 1). But, the table does't re-draw because of the error:

Uncaught TypeError: Cannot read property 'style' of undefined

kthorngren

Uncaught TypeError: Cannot read property 'style' of undefined

This is usually due to a mismatch in the number of columns defined with columns and the number in the thead. Is the data retuned always returning the same number fo columns or does it change? If it changes then you will probably need to clear the thead. If it changes then you will probably need to clear the table before reinitializing Datatables.

                    $('#CallManagerUnmatched').DataTable().destroy();
                    $('#CallManagerUnmatched').empty();
                    CallManagerUnmatchedDataTable = $('#CallManagerUnmatched').DataTable({
                        dom: '<"UnmatchedNotInSearch">frtip',
                        destroy: true,
                        data: data.Table,
                        rowId: 'CM_ID',
                        scrollX: true,
                        columns: columns
                    })

You will want to destroy() the Datatable first. Then use jQuery empty() before reinitializing.

You may also want to use $.fn.dataTable.isDataTable() to make sure the Datatable exists before using destroy() and empty() so you don't get errors if the DT doesn't exist.

Kevin

montoyam

The summary data has 3 fields. The detail data has many more fields. On page load it starts with summary data loaded. I just noticed that when I change to detail view, before the error, the column names for the three shown fields change to the names of the new data source, but thats I guess when the error happens because it doesnt add the other columns and the data itself stays with the summary data.

montoyam

sorry, i posted that last comment before I saw your reply.

montoyam

yes, that was exactly it.

                if ($.fn.DataTable.isDataTable('#CallManagerUnmatched')) {
                    $('#CallManagerUnmatched').DataTable().destroy();
                    $('#CallManagerUnmatched').empty();
                }

But I thought that the table gets destroyed in line 5 of my original post??

kthorngren

But I thought that the table gets destroyed in line 5 of my original post??

Do you mean this: destroy: true,

The destroy docs seem to indicate that:

Initialise a new DataTable as usual, but if there is an existing DataTable which matches the selector, it will be destroyed and replaced with the new table.

But I guess it doesn't replace the the thead. @allan or @colin can comment on what should take place.

Kevin

colin

Yep, I believe the destroy leaves the table in the state it's in in the DOM,

Colin

kthorngren

Can the docs be updated to note this? It sounds like destroy will destroy the table. Maybe also suggest if the table structure needs changed then use destroy() and jQuery empty().

Kevin