title: How to clear dataTable body after button click
body: <p>I have a datatable where data is coming from Backend. Data is coming based on FromDate to ToDate and in table we can sort data.But when there is no data between FromDate to ToDate than i am displaying "No data found in my table" but when i click on sorting icon on head of table because table is not refreshing itself.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var inittable = function() {
      var finance = $('#financetbl');
      var ofinance = finance.dataTable({
                  // Internationalisation. For more info refer to http://datatables.net/manual/i18n
                  "language": {
                      "aria": {
                          "sortAscending": ": activate to sort column ascending",
                          "sortDescending": ": activate to sort column descending"
                      },
                      "emptyTable": "No data available in table",
  
                      "zeroRecords": "No matching records found"
                  },
                  buttons: [{
                     extend: 'print',
                     className: 'btn dark btn-outline'
                 }, {
                     extend: 'excel',
                     className: 'btn yellow btn-outline '
                 }],
                  responsive: false,
                  //"ordering": false, disable column ordering 
                  //"paging": false, disable pagination
                  colReorder: {
                  reorderCallback: function () {
                      console.log( 'callback' );
                  }
              },
      
      "order": [
                      [0, 'asc']
                  ],
                  "lengthMenu": [
                      [5, 10, 15, 20, -1],
                      [5, 10, 15, 20, "All"] // change per page values here
                  ],
                  // set the initial value
                  "pageLength":10,
                   "dom": "&lt;'row' &lt;'col-md-12'B&gt;&gt;&lt;'row'&lt;'col-md-6 col-sm-12'l&gt;&lt;'col-md-6 col-sm-12'f&gt;r&gt;&lt;'table-scrollable't&gt;&lt;'row'&lt;'col-md-5 col-sm-12'i&gt;&lt;'col-md-7 col-sm-12'p&gt;&gt;", // horizobtal scrollable datatable
                  // Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
                  // setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js). 
                  // So when dropdowns used the scrollable div should be removed. 
                  //"dom": "&lt;'row' &lt;'col-md-12'T&gt;&gt;&lt;'row'&lt;'col-md-6 col-sm-12'l&gt;&lt;'col-md-6 col-sm-12'f&gt;r&gt;t&lt;'row'&lt;'col-md-5 col-sm-12'i&gt;&lt;'col-md-7 col-sm-12'p&gt;&gt;",
              });
          }</code></pre>
  </div>
  </div>
  </p>
  
  <p>jquery and Ajax code for table :- </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> $('#paymentdetails').click(function(){
       if( $(".datepickerInputFROM").val() &gt; $(".datepickerInputTO").val())
        {
        alertify.alert('From Date should not be greater than  To Date')
        return false;
        $(".datepickerInputFROM").val ="";
        }
       var getData = basePath +'AdminFinance/GetStudentPaymentsForDate/?FromDate='+$(".datepickerInputFROM").val() + '&amp;ToDate='+$(".datepickerInputTO").val()
         
         if (($(".datepickerInputFROM").val() == "") &amp;&amp; ($(".datepickerInputTO").val() == ""))
         { 
                              alertify.alert('Please select dates to proceed.')
         return false;
         } else if (($(".datepickerInputFROM").val() == "") || ($(".datepickerInputTO").val() == ""))
         { 
                              alertify.alert('Please select dates to proceed.')
         return false;
         }
      
                       
                     
      $.ajax({
                          url: getData 
                          , async: false
                          , success: function (response) {
                             //  alert(response[0]);
                              //$('#financetbl tbody').empty();
         $('#financetbl tbody').empty();
         
                             // if (response.resultCourse != '' &amp;&amp; response[0]!= 'null') {
            if (response.length &gt; 0) {
                               var tr;
                                   for (var i = 0; i &lt; response.length; i++) {
                                   tr = '&lt;tr&gt;'
                                   tr += "&lt;td&gt;" + response[i].transactionDate+ "&lt;/td&gt;";
                                   tr += "&lt;td&gt;" + response[i].applicationNumber+ "&lt;/td&gt;";
                                   tr += "&lt;td&gt;" + response[i].applicantName+ "&lt;/td&gt;"
                                
                                   tr += '&lt;/tr&gt;'
                                  $('#financetbl tbody').append(tr);
          }
          
          inittable();
                                 console.log(response)
           
                              }
                              else {
          console.log(response)
                                  alertify.alert("Error : No Payments Details Found");
          
          inittable();
          
                              }
                          }
                      });
      });</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have tried with below option but nothing is working for me.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>`$("#tbodyID tr").detach();
  $("#tbodyID tr").remove();
  $("#tbodyID").empty();
  $("#tbodyID").html("");
  $("tbody").empty();
  $("tbody").html("");
  $('#table').dataTable().fnDraw(false)`</code></pre>
  </div>
  </div>
  </p>