Save and restore search parameters from a form outside of the Datatable (mysql, php, ajax)

Sandbird

I am using a complex html form outside of a Datatable that has many dropdown selections in order to create a pretty complex request which is sent to the server-side processing script.
I would like to store the selections the user made on that form, and to be able to resend all those selections to the Datatable drawn whenever i want.
The form is called "#myForm", and i am sending the data (also saving them in my db) using this code here:

var myTable = $('#tableList').DataTable({
  "dom": 'Rlrtip',
  "bProcessing": true,
  "bServerSide": true,
  "lengthChange": true,
  "fixedHeader": true,
  "bStateSave": true,
  "deferRender": false,
  "searching": true,
  "deferLoading": 0,
  "sAjaxSource": "ajax_request.php?action=get_list",
    "fnServerParams": function ( aoData ) {
    var frm_data = $('#myForm').serializeArray();
        $.each(frm_data, function(key, val) {
        aoData.push( { "name": val.name, "value": val.value } );
    });
    
    $.ajax( {
        "url": "dbManager.php?action=save",
        "data": {"name":"myKey", "state": frm_data},
        "dataType": "json",
        "type": "POST",
        "success": function () {}
    });
  }
});

Basically i am serializing the form, and for each inputtext or dropdown selected i am sending the data to the php file, where i retrieve the _GET values and create a complex SQL with which i populate a 'row' array which in the end i'm sending it back to client with:
$output['aaData'][] = $row;
Using that second ajax call, i am storing all of my 'myForm' values to my database. They are stored like this in a db cell:
[{"name":"compId","value":"1"},{"name":"ContactId","value":""},{"name":"Year","value":"2017"}]
I used this example here to save the data to the db: http://refreshmymind.com/datatables-state-save-client-server-side/

Now i need to find a way (probably using stateLoadCallback), to retrieve these values and somehow redraw the table based on the initial search the user did....but i dont know how.
The reason why i need all of the above is because the search form is also an edit form. Once the user makes a selection of dropdowns and clicks on the search button, the datatable is created, then when the user clicks on a row, then all of the search fields and dropdown menus are filled with all the data selected so the user can edit the entries. But i still need the datatable results to exist if the form is saved, in case he needs to edit another row.....So somehow i need to redraw the datatable based on the initial search he did.

Any ideas?
-Thanks

Sandbird

I solved the problem with a little trick.
Before loading my Datatable, (based on the example site i gave), i am loading the variables saved like this:

              //initial load based on previous searches
               var o;
                $.ajax( {
                    "url": "dbManager.php?action=load",
                    "data":{"name":"myKey"},
                    "async": false,
                    "dataType": "json",
                    "type": "POST",
                    "success": function (json) {
                        o = json;
                    }
                });

Then i changed my fnServerParams function to this:

"fnServerParams": function ( aoData ) {
    if (typeof o != 'undefined'){
       var frm_data = o;
    } else {
            var frm_data = $('#myForm').serializeArray();
    }
     $.each(frm_data, function(key, val) {
        aoData.push( { "name": val.name, "value": val.value } );
        //d.key = val;
     });
}

This way, if the 'o' var is defined, it will use the data retrieved from the db instead.
I also removed the 2nd ajax call i did to save the form's data and added that code in my forms' search button, like so:

table = $('#tableList').DataTable();
$("#search").on('click',function() {
    var frm_data = $('#myForm').serializeArray();
  $.ajax( {
      "url": "/dbManager.php?action=save",
      "data": {"name":"myKey", "state": frm_data} ,//you can use the id of the datatable as key if it's unique
      "dataType": "json",
      "type": "POST",
      "success": function () {}
  } );
  
  table.draw();
});

So when the user clicks on the search button, it will save all the form fields to a db field, and redraw the table, based on whatever he selected in the form.
And if there is a page refresh, the data would be loaded from the previous function i just wrote.