Datatables - statesavecallback and other function sactivate on click

See more:

Javascript

PHP

DataTable

How can I implement stateSaveCallback / "colReorder" / "buttons": ['colvis'] to be enable when the user clicks on a button?

Basically, I need the user to be able to edit the datatable only when he clicks an edit button and the changes to be saved when he press the save button... if the user doesn't press the save button no change will be saved and if he doesn't click on the edit button he won't be able to make any changes... any ideas how to do this?

Currently I have the code below for my dataTable.

What I have tried:

 <pre lang="Javascript">$('#resultsTable').DataTable({
    			"stateSave": true,
    
    			// "serverSide": 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
    			
    			'stateSaveParams.dt': function(e, settings, data) {
    				data.search.search = "";
    				// table.columns.visible();
    			},
    			//SaveState
    			'stateSaveCallback': function(settings, data) {
    				$.ajax({
    					'url': 'saveDtableState.php',
    					'data': { name: 'resultsTable', 'state': data },
    					'dataType': 'json',
    					'method': 'POST',
    					"success": function() {},
    					error: function(xhr, ajaxOptions, thrownError) {
    						console.log(thrownError);
    					}
    				});
    			},
    			'stateLoadCallback': function(settings, callback) {
    				$.ajax({
    					'url': 'loadDtableState.php',
    					'data': { name: 'resultsTable' },
    					'dataType': 'json',
    					'type': "POST",
    					success: function(data) {
    						callback(data);
    						console.log('test: ' + data);
    
    					},
    					error: function(xhr, ajaxOptions, thrownError) {
    						console.log(thrownError);
    					}
    				});
    			}
    
    		})

will it work if I use this?

    $('#saveEdit').on("click", function(){
    		table.state.save();
    	});

or will it keep saving the state of the table every time I make a change? (I don't want that). and how to implement the other things? ***any tips? ***