Reload FixedColumns

Reload FixedColumns

freecexfreecex Posts: 25Questions: 4Answers: 0

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?

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    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

  • freecexfreecex Posts: 25Questions: 4Answers: 0

    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?

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    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

  • freecexfreecex Posts: 25Questions: 4Answers: 0

    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?

  • freecexfreecex Posts: 25Questions: 4Answers: 0
    edited March 2019
    $.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.

  • freecexfreecex Posts: 25Questions: 4Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    edited March 2019

    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

  • freecexfreecex Posts: 25Questions: 4Answers: 0
    edited March 2019

    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.

  • freecexfreecex Posts: 25Questions: 4Answers: 0

    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!

This discussion has been closed.