stateSave no longer functions as desired after table is destroyed / recreated

theodikus

I have a dataTable with variable columns. When I first create the table, I can changed the number of rows displayed and the column sort, and this will persist through navigating away and refreshing the page.

If I add a new column, I recreate the table entirely, and the stateSave no longer persists. Is there another way to persist this state and apply it after I've recreated the table?

I can't provide a link because of NDA stuff, but I can show my table creation here. The following is from my makeTable function; after the table is created, I add handlers to the rows and buttons.

        this.selectedProducts = [];
        this.selected_custgids = [];
        this.selectedProducts = this.queryObject.products.split(',');

        var columnDefinitions = [];

        var colArray = [];
        //$("#data_table body").empty();
        $("#headers").empty();
        $("#footers").empty();

        for(var i = 0; i < this.columns.length; i++){
            colArray.push(i);

            var obj = {};
            
            if(i > 0){
                obj["sTitle"] = this.columns[i];

                if(i == 3 || i == 4){
                    obj["sWidth"] = '5%';
                }else{
                    var percent = Math.floor(90 / this.columns.length -2);
                    //console.log(percent);
                    obj["sWidth"] = percent.toString() + '%';
                }

            //console.log(obj);
            }else{

                obj = {
                    targets: [0],
                    render: function (data, type, row) {
                        var id = row[0];
                        var str = '<a id="' + id +'" class="btn button-link">' + id + '</a';
                        return str;
                    },
                    visible: true,
                    sortable: false,
                    searchable: false,
                    width: '15%',
                };

                var percent = Math.floor(90 / this.columns.length -2);
                    //console.log(percent);
                    obj["sWidth"] = percent.toString() + '%';
        
            }

            columnDefinitions.push(obj);

            $("#headers").append("<th>" + this.columns[i] + "</th>");
            $("#footers").append("<th>" + this.columns[i] + "</th>");
        }

        $('#data_table tfoot th').each( function () {
            //console.log('inside tfoot thing');
            var title = $(this).text();
            $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
        });

        var buttonCopy = {
            exportOptions: {
                columns: colArray
            }
        }

        var buttonPrint = {
            exportOptions: {
                columns: colArray
            }
        }

        var buttonCsv = {
            exportOptions: {
                columns: colArray
            }
        }

        var buttonExcel = {
            exportOptions: {
                columns: colArray
            }
        };

        //console.log(columnDefinitions);

        var that = this;
        var table = $('#data_table').DataTable().destroy();

        $('#data_table').DataTable({
            "aoColumnDefs": columnDefinitions,
            "autoWidth": true,
            "pageLength": 10,
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            "data": this.tableData,
            "oLanguage": {
                "sSearch": "",
                "sEmptyTable": "You have no data."
              },
            "buttons": [
                    $.extend( true, {}, buttonCopy, {
                        extend: 'copy',
                        titleAttr : 'Copy'
                    }),
                    $.extend( true, {}, buttonPrint, {
                        extend: 'print',
                        titleAttr : 'Print'
                    }),
                    $.extend( true, {}, buttonCsv, {
                        extend: 'csv',
                        titleAttr : 'CSV'
                    }),
                    $.extend( true, {}, buttonExcel, {
                        extend: 'excel',
                        titleAttr : 'Excel'
                    })
                 ],
            "dom": 'lifrtBp',
            "stateSave": true
            
                
        });

        var oTable = $('#data_table').DataTable();