Loading datatable after click

jchappell99

Still learning here. I have a datatable that is working beautifully. Code is below. The problem is when I comment out LoadData() in the document ready, the datatable shows "Processing" after hitting search and then disappears. But, if I LoadData() initially on the document ready, all works well after hitting the search....?? I don't know what to look for....?

function LoadData(){
var oTable =
$("#retiredTable").dataTable({
"oLanguage": {
"sZeroRecords": "No records to display",
"sSearch": "Grid Search"
},
"aLengthMenu": [[10, 20, 50, 100, 200, -1], [10, 20, 50, 100, 200, "All"]],
"iDisplayLength": 10,
"bSortClasses": false,
"bPaginate": true,
"bAutoWidth": true,
"bProcessing": true,
"bServerSide": false,
"bDestroy": true,
"sAjaxSource": "GetData.asmx/GetRetiredData",
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bDeferRender": true,
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [0] }
],
"fnServerParams": function (aoData) {

aoData.push({ "name": "sFilter1", "value": $('#Filter1').val() });
aoData.push({ "name": "sFilter2", "value": $('#Filter2').val() });
aoData.push({ "name": "sFilter3", "value": $('#Filter3').val() });
aoData.push({ "name": "sFilter4", "value": $('#Filter4').val() });
aoData.push({ "name": "sFilter5", "value": $('#Filter5').val() });
aoData.push({ "name": "sFilter6", "value": $('#Filter6').val() });

},
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"type": "GET",
"url": sSource,
"data": aoData,
"success":
function (msg) {

var json = jQuery.parseJSON(msg.d);
fnCallback(json);
$("#retiredTable").show();
}
});
}
})
}


$(document).ready(function () {
$("#get").click(LoadData);
//LoadData();
});