My apologies if this has been answered, I'm not seeing it in the forums.

In an MVC Web API 2 site, I've created a simple form which queries the web service, to get three distinctly different result sets of data. In jQuery, I'm hiding or showing the div & table based on logic provided by the 3 field request form. The web service provides the data, however I'm having issues clearing the data from the table if the report is changed.

My intended result, is that when a report is changed via the dropdownlist, and the user clicks the submit button, the dataTable is cleared of all data, and the appropriate table is filled with the new data based on the "_type" of report.

In the OnSubmit() method tied to the HTML submit button, I'm attempting to clear the dataTable via $("#MyTable").dataTable().clear().draw();

What appears to be happening, is that the jquery.dataTable.js file experiences an invalid argument @ line 2025, causing the removal of the table and div.

I believe that code is meant to create an empty row in the table.

If I do not "clear" and "draw" the datatable by removing the "ClearTables()" method call, I can see the expected results in the datatable, however I receive an error for "datatables.net/tn/3" when I attempt to get the data again (additional criteria from the form), or a tn/4 when changing the type.

My script: (Generalized....may contain type-o's):

var _type = null;

function HideTables(){
     $('#myTable1').hide();
     $('#myTable2').hide();
}

function ClearTables(){
          $('#myTable1').dataTable().clear().draw();
          $('#myTable2').dataTable().clear().draw();
}

function OnSubmit(){
     HideTables();
     ClearTables();

     if (!($('#ddlReportType :selected').val() == "")){
          _type = $('#ddlReportType :selected').val();
     } 
     
     // using a promise accessing data from another .js file which provides the json data as "results"
     $.when(GetData()){
          .then(function(results){

               if (_type == "Table1Data"){
                    $('#divTable1').show();
                    $('#myTable1').show();
                    $('#myTable1').dataTable({
                         data: results,
                         "aoColumns" :  [
                              { "mData" : 'col1' },
                              { "mData" : 'col2' },
                              { "mData" : 'col3' }
                          ]
                     });
                } // END: if

               else {
                    $('#divTable2').show();
                    $('#myTable2').show();
                    $('#myTable2').dataTable({
                         data: results,
                         "aoColumns" :  [
                              { "mData" : 'col1' },
                              { "mData" : 'col2' },
                              { "mData" : 'col3' },
                              { "mData" : 'col4' },
                              { "mData" : 'col5' }
                          ]
                     });

               } // END: else

          }); // END: .then
} // END: OnSubmit()