Reloading Data in a datatable on form submit...

vkcode7

I have a web page that has 2 parts (1) a form with certain inputs (search filters) (2) DataTable that reacts to submit.

Is there a way I can reload or refresh the DataTable on form submit? User can look at the data; tweak the search criteria in form and resubmit.

For now I am pre populating the DataTable with default data on page load. How can I make it reach to submit() button and reload / redraw itself using the form data?

<script>
$(document).ready(function() {
            $('#dtQryResults').DataTable({
            responsive: true,
            "bProcessing": true,
            "serverSide": false,
            "order" : [[2, "desc"]],
            "ajax":{
                url :"./include/mysql/qryresults.php?tx=default", // json datasource
                type: "GET",  // type of method  ,GET/POST/DELETE
                error: function(){
                    $("#dtQryResults").css("display","none");
                }
            }
    });   
</script> 

vkcode7

I tried solving this by serializing form inputs to a variable and then using that variable in DataTable settings. For now it is working but I haven't done much testing yet.

var searchFilter = "tx=default"; //this is for default criteria

$("#queryform").submit(function(e) {
e.preventDefault();
e.stopPropagation();
searchFilter=$('#queryform').serialize();
$('#dtQryResults').DataTable().ajax.reload();
});

Changed "ajax" to the following:

"ajax":{
url :"./include/mysql/qryresults.php", // json datasource
type: "GET", // type of method - GET/POST/DELETE
data: function( d ) {
d.tx=searchFilter;
},
error: function(){
$("#dtQryResults").css("display","none");
}
},