Column Visibility not working with StateSave saving on db

george001

How can I save with columns are hidden and which are not when using datatables stateSaveCallback ?

I don't use any responsive options..
It saves the table's state but not the visibility...
Thank you

$('#resultsTable').DataTable({
                    'stateSave': true,
                    //rows per page
                    "lengthMenu": [[25, 50, 100, 150, 200, 250, -1],
                                   [25, 50, 100, 150, 200, 250, "All"]],
                    "dom": '<"top"Bfi>rt<"bottom"lp><"clear">', //show entries on bottom
                    //Scrolling table
                    "scrollY": 600, //Constrain the DataTable to the given height
                    "deferRender": true, //Elements will be created only when the are required
                    "scroller": true, //Enable vertical scrolling in DataTables.
                    "scrollX": true, //scroll horizontal 
                    "colReorder": true, // column reordering
                    "buttons": ['colvis'], //enable column visibility button
                    //Grouping table 
                    "columnDefs": [{ "visible": false, "targets": 0 }], //mades target column hidden //if commented ---> Uncaught TypeError: Cannot read property 'style' of undefined 
                    "order": [
                        [0, 'asc']
                    ], //sorting based on column
                    "drawCallback": function(settings) { //DataTables' callback function
                        var api = this.api(); //give an API instance
                        var rows = api.rows({ page: 'current' }).nodes(); //Get the row TR node for the selected row. for current page

                        var last = null; //last cell's data that was checked

                        var groupName = []; //array for holding the sorting values

                        //loops through each cell of column 2 and gets the data of each one
                        api.column(0, { page: 'current' }).data().each(function(group, i) {

                            if (last !== group) { ////checds if last cell's data is the same as previous 
                                //counts the rows(i) and adds the group name (i = number of rows, group is the name of each group)
                                $(rows).eq(i).before(
                                    '<tr class="group" id="' + i + '" style="font-weight: bold;"><td colspan="5">' + group + '</td></tr>'
                                );
                                groupName.push(i); //push the group's id in the array
                                last = group; //sets the last var to the name of the group that was just checked
                            }
                        });
                        //iterates through the array
                        for (var d = 0; d < groupName.length; d++) {
                            // Code added for adding class to sibling elements as "group_<id>"  
                            $("#" + groupName[d]).nextUntil("#" + groupName[d + 1]).addClass(' group_' + groupName[d]);
                            // Code added for adding Toggle functionality for each group
                            $("#" + groupName[d]).click(function() {
                                var gid = $(this).attr("id");
                                $(".group_" + gid).slideToggle(300);
                            });
                        }
                    },
                     

                    'stateSaveParams.dt': function(e, settings, data) {
                        data.search.search = "";
                        table.columns.visible();
                    },

                    //SaveState 
                    'stateSaveCallback': function(settings, data) {
                        if (run == true) {
                            $.ajax({
                                'url': 'example.php',
                                'data': { name: 'resultsTable', 'state': data },
                                'dataType': 'json',
                                'method': 'POST',
                                "success": function() {},
                                error: function(xhr, ajaxOptions, thrownError) {
                                    console.log(thrownError);
                                }
                            });
                        }
                        run = false;
                    },
                    'stateLoadCallback': function(settings, callback) {
                                            $.ajax({
                                                'url': 'example2.php',
                            
                            'dataType': 'json',
                            'type': "POST",
                            success: function(data) {
                                callback(data);
                                
                            },
                            error: function(xhr, ajaxOptions, thrownError) {
                                console.log(thrownError);
                            }
                        });
                    }
                });