Reload FixedColumns

freecex

Hi everybody. I've got a datatable with first column/row fixed.
Everything works perfect but, if I reload my partial view where my DT is, I encounter this error

Uncaught FixedColumns already initialised on this table

Each time I reload my partial view from menu, I'm doing

if (table != null) {
table.destroy();
}
where table = $('#tbfstorico').DataTable();

Where's my mistake? any idea?

kthorngren

Your code seems to work here:
http://live.datatables.net/wifoyeja/1/edit

Please provide a link to your page or a test case replicating the issue. You can update my example.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

freecex

Hi Kevin,

it's exactly what I've to do, but in my case works only if I reload entire project.
I'm working with partialview, so I got error when I reload only my partial.
Reloading all project works with no problem....

Maybe a bug? What's wrong?
I can provide a demo test, but only next Monday, because I can t expose our internal server.... otherwise... any idea on this?

kthorngren

Without seeing it its hard to say what the problem is. I would place a console log statement in the if statement to make sure the destroy() statement is executed:

if (table != null) {
console.log('destroying table');
table.destroy();
}

Beyond that its hard to say what is happening when you are reloading the partial view.

Kevin

freecex

I'll do my best to have a test before Monday...
Yes, I try to put some console.log before and affter destroying table .... everything seems ok (seems... but not!)

Any other idea?

freecex

$.ajax({
            url: ROOT + 'YieldUP/Situazioni/LoadListaStorico',
            type: 'POST',
            data: $("form").serialize(),
            success: function (data) {
                if (data.success == true) {
                    dataValue = data.dataValue;
                }
            },
            error: function (data) {
                StopLoading();
            },
            complete: function (data) {

            }
            //
        }).done(function (data) {
            if (table != null) {

                console.log('DESTROY');

                console.log(table);
                
                table.destroy();

                console.log('DESTROIED');

          
            }
            else {
                console.log('NOT DESTORY');
            }


            if (dataValue == null) {
                dataValue = [];
            }

            document.getElementById("tbfstorico").style.visibility = "visible";


            table = $('#tbfstorico').DataTable({

                "processing": false,

                "destroy": true,
                
                "serverSide": false,     // for process server side
                "filter": true,         // this is for disable filter (search box)
                "orderMulti": true,     // for disable multiple column at once
                "pageLength": NumeroRighe,
                "searchDelay": 1000,
                "bAutoWidth": false,
                "dom": 'Bfrtip',

                "scrollY": "700px",
                "scrollX": true,
                "scrollCollapse": true,
                "paging": false,


                "fixedColumns": {
                    leftColumns: 5
                },


                buttons: [
                    {
                    extend: 'copyHtml5',
                    titleAttr: '@Resources.ResourceView.CopyClipboard',
                    text: '<i class="fa fa-files-o"></i>',
                    exportOptions: {
                        columns: [':visible'],
                        orthogonal: 'copy'
                    }
                },
                {
                    extend: 'csvHtml5',
                    text: '<i class="fa fa-file-excel-o"></i>',
                    titleAttr: 'CSV',
                    exportOptions: {
                        columns: [':visible'],
                        orthogonal: 'copy'
                    }
                },
                {
                    text: '<i class="fa fa-file-pdf-o"></i>',
                    titleAttr: 'PDF',
                    extend: 'pdfHtml5',
                    customize: function (doc) {
                        doc.content[1].table.widths =
                            Array(doc.content[1].table.body[0].length + 1).join('*').split('');
                    },
                    orientation: 'landscape',
                    exportOptions: {
                        columns: [':visible'],
                        orthogonal: 'copypdf'
                    }
                }
                ],

                "language": {
                    "info": '@Resources.ResourceView.ShowNumberRecord',
                    "infoFiltered": '@Resources.ResourceView.FilteredNumberRecord',
                    "loadingRecords": '@Resources.ResourceView.LoadingData',
                    "processing": '@Resources.ResourceView.ProcessingData',
                    "search": '@Resources.ResourceView.Search',
                    "paginate": {
                        "previous": '@Resources.ResourceView.PreviousPage',
                        "next": '@Resources.ResourceView.NextPage'
                    }
                },
                "order": [[0, "desc"]],

                drawCallback: function () {
                    this.api()
                        .fixedColumns()
                        .update();
                },

                "scrollX": true,

                "columnDefs": AbilitazioniColonne,
                "data": dataValue,
                columns: ListaColonne
            });

            

            
            
            $('#tbfstorico').on('dblclick', 'tr', function () {


                var data = table.row(this).data();

                //ApriDettaglio(data[0], data[3], data[4]);

                var Tipo = document.getElementById('Tipo').value;
                var Intervallo = document.getElementById('Intervallo').value;

                if (Tipo == '@Resources.ResourceView.Batch') {
                    if (Intervallo != '@Resources.ResourceView.All') {
                        $("#btnGraficoInfo").click();
                        return;
                    }
                }

                document.getElementById('idriga').value = data[0];
                document.getElementById('articoloscelto').value = data[4];
                document.getElementById('lottoscelto').value = data[3];

                OpenModal();
            });



            $('#tbfstorico').on('click', 'tr td:first-child', function () {
                var data = table.row(this).data();

                //ApriDettaglio(data[0], data[3], data[4]);

                var Tipo = document.getElementById('Tipo').value;
                var Intervallo = document.getElementById('Intervallo').value;

                if (Tipo == '@Resources.ResourceView.Batch') {
                    if (Intervallo != '@Resources.ResourceView.All') {
                        $("#btnGraficoInfo").click();
                        return;
                    }
                }

                document.getElementById('idriga').value = data[0];

                document.getElementById('datainiscelta').value = data[1];
                document.getElementById('datafinescelta').value = data[2];

                document.getElementById('articoloscelto').value = data[4];
                document.getElementById('lottoscelto').value = data[3];

                OpenModal();
            });

            StopLoading();
        });

EDIT: Edited for Markdown code formatting.

freecex

This is how I load data.
At the beginning, you can see where I check if table exist or not.
Into my console, I got DESTROY and DESTROIED message with no error.
Error appears later.

kthorngren

I was originally thinking you were getting this error:

DataTables warning: table id={id} - Cannot reinitialise DataTable.
https://datatables.net/manual/tech-notes/3

I don't see anything in that code that would seem to cause the Uncaught FixedColumns already initialised on this table error. There are a couple threads on the forum with the error but no resolution. The developer asked for access in both cases. You can contact @allan directly if you want to give him the link to your page.

I would make sure that you are loading jquery.js and datatables.js only once. I would look at using the latest versions of Datatables and FixedColumns. I would look for other references to fixedcolumns in your JS code. You use fixedColumns().update() in your drawCallback function. Should cause the issue but you could comment it out just to see. I tried it here and it seems fine:
http://live.datatables.net/wifoyeja/3/edit

Kevin

freecex

Hi Kevin,

thank you for your suggestion.
fixedColumns().update() was my last release, got error with or without.
Monday for sure I'll have a test app, I'll write to you as soon as possible.
Send a message to Alan too... I'm waiting for an answer.

freecex

Hi Kevin,

I solve it!
On Datatable() I set only
"scrollY": "700px",
"scrollX": true

then after set fixedcolumn with new $.fn.dataTable.FixedColumns(table, {
leftColumns: 5
});

Now it works!