Updating DataTables with Search Results on Button Click

I don't have much experience with javascript and jquery and I did search for similar questions, however I'm failing to understand how to reload the table with new results from a query on a button press. The results will have different columns. All I've managed to do so far is reload the table data using a static link using fnReloadAjax('source2.php'), this returns data as needed. From what I've read it seems that I need to destroy the table and readd a datasource somehow. Perhaps it would be easier replacing the whole a whole div with a real table, this I also do not know how to do. Ideally I want to just be able to repopulate the table from a page like search.php?=myQuery

<script>
				//dataTables.fnGetHiddenNodes.js compacted for readibility
				
				var oTable;

				$(document).ready(function() {
					oTable = $('#example').dataTable({
						"bJQueryUI": true,
						"iDisplayLength": 30,
						"bProcessing": true,
						"sPaginationType": "full_numbers",
						"sAjaxSource": "getresults.php",
						"aoColumns": [
							    { "mData": "title" },
							    { "mData": "code" },
							]
					});
				
					    $('#click_me').click( function () {
						alert("test");
						oTable.fnReloadAjax('getresults2.php');
					    });

				} );
</script>

And I would want to load into my table or a new table with different columns results that could come a php page that would take the its GET value from a search box.