Save and restore search parameters from a form outside of the Datatable (mysql, php, ajax)
Save and restore search parameters from a form outside of the Datatable (mysql, php, ajax)
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
This question has an accepted answers - jump to answer
Answers
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:
Then i changed my fnServerParams function to this:
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:
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.