Server side datatables fails on second load in IE11

trogdor

I am using data tables to output reports on my system. They are activated by an ajax call to get the data which is then passed to the js file to output to the page. this works perfectly on all browsers apart from ie11.
Just a quick note i do not get any error messages at all on other browsers.

What happens is on page load in ie11 i get this error message

but this doesnt stop the the initial report loading when you select it.
When i use the same button to either reload the same report or select a different report
the report crashes and i get this error

when i click into the error to see what the issue is it takes me to this section but the doesnt seem to be a problem that i can find.

and here is the code to display the table

window.table = $($tableName).DataTable({

                // gui defaults
                fixedHeader: {
                    header: false,
                    footer: true
                },
                autoWidth: true,
                filter: true,
                scrollX: true,
                sScrollXInner: "100%",
                responsive: false,
                paging: true,
                pageLength: 10,
                language: {
                    paginate: {
                        previous: '<i class="tk-icon-chevron-left"></i>',
                        next: '<i class="tk-icon-chevron-right"></i>',
                    },
                    lengthMenu: '_MENU_ records per page',
                },
                stateSave: false,
                stateSaveParams: function (settings, data) {
                    data.search.search = "";
                },
                processing: true,
                serverSide: true,
                ajax: function (data, callback, settings) {
                    $('#loading').empty();
                    $.when(reportData($searchValue, data, 0)).done(function (responseInternal) {
                        if (responseInternal == true) {
                            var out = JSON.parse(response);
                        } else {
                            var out = JSON.parse(responseInternal);
                        }
                        if (out.data !== null) {
                            callback({
                                draw: data.draw,
                                recordsTotal: out.recordsTotal,
                                recordsFiltered: out.recordsFiltered,
                                //data: JSON.stringify($response.data)
                                data: out.data
                            });
                            $('#reportTable').find('thead').append('<tr></tr>');
                            $.each(out.totals, function (k, v) {
                                var $total = v;
                                $('#reportTable').find('thead').find('tr').eq(1).append('<th>' + $total.total + '</th>');
                            });
                        } else {
                            $('#reportTable').find('thead').empty();
                            $('#reportTable_processing').hide();
                            $('#reportTable > tbody ').empty().append('<tr><td>No data in this report matches the term "' + data.search.value + '".</td></tr>');
                        }
                    });
                },

                //data: $response.data,
                columnDefs: $response.columns,
            });

Any help would be greatly appreciated

trogdor

I have actually resolved this myself but will post the answer to hopefully help anyone else. the issue was that ie cant refresh the table correctly as it was reading the columns that where already populated instead of of reading the columns for the newly selected report. to fix this i used the below code to empty the table on selection of a new report so that it could only read from the new report.

$(document).on('click', '[data-click="select-report"] li', function () {
    $('#reportContainer').empty();
    refreshReportTable();
});