Ajax reloaded site with Datatable inside, destroy doesnt work like expected

rebru

Hi all

Got some very strange problem with DataTables. I did work with it since years ago, but never seen this behaviour before.

My problem is:

I load my sites with an interceptor which stops normal a href functionality, loads the new page and cut out/paste in the necessary container. Without this interceptor, DataTables works like expected.

But if use this interceptor, it prodoces some strange behaviour like:

• The Buttons will ever be visible/not visible which depends on the first loaded Datatable.
• The Datatables show "mData undefined" errors, when switched from ajax based datatable to a static datatable and booth has the Buttons enabled. It shows a "styles undefined" error when switched to a static one that has not buttons.

This slowly drives me crazy ... someone has a hint? Whatever i did try to remove DataTables some of the config still remain, even if i check with $.fn.dataTable.tables() before initializing the new on, which shows me, that there are no datatables.

// Page reloading via ajax, intercept normal a href functionality
$('.m-menu__link','#m_aside_left ').click(function(e) {
            var element = $(this);
            var url = element.attr('href');
            if(url != 'javascript:;') {
                e.preventDefault();
                var stateObj = {}
                history.pushState(stateObj, '', url);
                console.log($.fn.dataTable.tables());

                $.ajax({
                    url: url,
                    success: function (data) {
                        /* Reattach active Menulink */
                        $('li.m-menu__item--active','#m_aside_left').removeClass('m-menu__item--active');
                        element.parent().addClass('m-menu__item--active');

                        /* DataTables fix */
                        for(i in $.fn.dataTable.tables()) {
                            $($.fn.dataTable.tables()[i]).DataTable().destroy(true);
                            $($.fn.dataTable.tables()[i]).remove();
                        }
                        /* Remove Body Content */
                        $('#bodycontentContainer').remove();

                        /* Add Body Content */
                        $('#m_aside_left').after($(data).find('#bodycontentContainer'));
                    },
                    complete: function() {

                    }
                });
            } else {
                return true;
            }
            return false;
        });

// Site with Buttons, static data
var exportColumns = [1,2,3,4,5,6,7,8];
                var dtConfig = {
                    stateSave: false,
                    searching: true,
                    dom: `<'row'<'col-sm-12 col-md-6'f><'col-sm-12 col-md-6 text-right'B>><'row'<'col-sm-12't>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 dataTables_pager'lp>>`,
                    buttons: [
                        { extend: 'print', text:'{{ "label.drucken"|trans }}', exportOptions: { columns: exportColumns } },
                        { extend: 'copyHtml5', text:'{{ "label.kopieren"|trans }}', exportOptions: { columns: exportColumns } },
                        { extend: 'excelHtml5', text:'{{ "label.excel"|trans }}', exportOptions: { columns: exportColumns } },
                        { extend: 'csvHtml5', text:'{{ "label.csv"|trans }}', exportOptions: { columns: exportColumns } },
                        { extend: 'pdfHtml5', text:'{{ "label.pdf"|trans }}', orientation: 'landscape', exportOptions: { columns: exportColumns } },
                    ]
                };
                var table = rebru.datatable.init('#firmenTable', dtConfig);

                $('.dataTables_filter input[type=search]').focus();

// Site without Buttons, static data
var exportColumns = [1,2,3,4,5,6,7,8];
                var dtConfig = {
                    stateSave:false,
                    searching: true,
                    dom: `<'row'<'col-sm-12 col-md-6'f><'col-sm-12 col-md-6 text-right'>><'row'<'col-sm-12't>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 dataTables_pager'lp>>`,
                };
                rebru.datatable.init('#konfigurationTable', dtConfig);
                $('.dataTables_filter input[type=search]').focus();

// Site with Buttons, ajax data
            var exportColumns = [1,2,3,4,5,6,7,8];
            var dtConfig = {
                dom: `<'row'<'col-sm-12 col-md-6'f><'col-sm-12 col-md-6 text-right'B>><'row'<'col-sm-12't>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 dataTables_pager'lp>>`,
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ path('core.benutzer.ajaxliste') }}',
                    type: 'GET'
                },
                buttons: [
                    { extend: 'print', text:'{{ "label.drucken"|trans }}', exportOptions: { columns: exportColumns } },
                    { extend: 'copyHtml5', text:'{{ "label.kopieren"|trans }}', exportOptions: { columns: exportColumns } },
                    { extend: 'excelHtml5', text:'{{ "label.excel"|trans }}', exportOptions: { columns: exportColumns } },
                    { extend: 'csvHtml5', text:'{{ "label.csv"|trans }}', exportOptions: { columns: exportColumns } },
                    { extend: 'pdfHtml5', text:'{{ "label.pdf"|trans }}', orientation: 'landscape', exportOptions: { columns: exportColumns } },
                ],
                columns: [
                    {data: 'aktionen', class:'text-right nowrap', orderable:false, searchable:false },
                    {data: "id", name:"id", class:"minCell nowrap text-center", searchable:false, orderable:true },
                    {data: 'name', name:'name', class:'nowrap'},
                    {data: 'anschrift', name:'anschrift', class:'nowrap'},
                    {data: "email"},
                    {data: "kunde", name:"kunde", class:"minCell", searchable:false, orderable:true },
                    {data: "mitarbeiter", name:"mitarbeiter", class:"minCell", searchable:false, orderable:true },
                    {data: 'rollen', name:'rollen', class:'minCell', searchable:false, orderable:false },
                    {data: 'erstellt', name:'erstellt', class:'text-center nowrap'},
                ],
                columnDefs: [
                    {
                        targets: 0,
                        orderable: false,
                        render: function(data, type, full, meta) {
                            return `
                                <span class="dropdown">
                                    <a href="#" class="btn m-btn m-btn--hover-brand m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="dropdown" aria-expanded="true">
                                      <i class="la la-ellipsis-h"></i>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right">
                                        <a class="dropdown-item" onclick="detailBenutzer(this, 'metadaten')" data-attr-id="`+full.id+`"><i class="la la-edit"></i> {{ "bearbeiten.name"|trans }}</a>
                                        <a class="dropdown-item" onclick="detailBenutzer(this, 'metadaten')" data-attr-id="`+full.id+`"><i class="la la-search"></i> {{ "details.name"|trans }}</a>
                                        <a class="dropdown-item" onclick="detailBenutzer(this, 'profil')" data-attr-id="`+full.id+`"><i class="la la-user"></i> {{ "profil.name"|trans }}</a>
                                        <a class="dropdown-item" onclick="removeBenutzer(`+full.id+`)"><i class="la la-trash"></i> {{ "löschen.name"|trans }}</a>
                                        <a class="dropdown-item" target="_blank" href="{{ path('core.default') }}?_switch_user=`+full.email+`" ><i class="flaticon-visible"></i> {{ "impersonation.starten"|trans }}</a>
                                    </div>
                                </span>
                            `;
                        },
                    },
                    {
                        targets: 7,
                        orderable: false,
                        render: function(data, type, full, meta) {
                            if($.isArray(data)) {
                                return data.join(", ")
                            } else {
                                return '!!!!'
                            }
                        },
                    },
                ],
            };
            rebru.datatable.init('#benutzerTable', dtConfig);

// DataTables init Function
rebru.datatable = function() {

    var defaultConfig = {
        dom: `<'row'<'col-sm-12't>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 dataTables_pager'lp>>`,
        responsive: true,
        destroy: true,
        searchDelay: 150,
        pageLength: 10,
        searching: true,
        lengthChange: false
    };

    var initTable = function(selector, config) {

        var table = $(''+selector);
        var datatableConfig = $.extend(defaultConfig,config);
        table.DataTable(datatableConfig);

        return table;
    };

    return {

        //main function to initiate the module
        init: function(selector, config) {
            return initTable(selector,config);
        },

    };

}();