Correct use of .dataTable().clear().draw();

SPSteve

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()

colin

Hi SPSteve,

This forum post will probably help. The problem is because lines 9 and 10 should be

$('#myTable1').DataTable().clear().draw();

note the casing on DataTable(). Otherwise, it returns a jQuery object, and not a DataTables object.

Cheers,

Colin

kthorngren

In addition to Colin's comments.... have you tried the troubleshooting steps in the links provided in the two errors?
https://datatables.net/manual/tech-notes/3
https://datatables.net/manual/tech-notes/4

You onSubmit function is causing the reinitialize error (tn/3). You can either add the destroy option or you can replace the Datatables init code with rows.add() and initialize the Datatables once at the start of your script. No need to use both clear() and destroy. Use clear() and rows.add() or just destroy.

The unknown parameter(tn/4) just means your data doesn't match the columns config in Datatables. Follow the troubleshooting steps and it should help you to fix it. If not post back with an example of your data and which table is noted in the error.

Kevin