javascript - How to clear dataTable body after button click -

i have datatable data coming backend. data coming based on fromdate todate , in table can sort data.but when there no data between fromdate todate displaying "no data found in table" when click on sorting icon on head of table because table not refreshing itself.

var inittable = function() {      var finance = $('#financetbl');      var ofinance = finance.datatable({                  // internationalisation. more info refer http://datatables.net/manual/i18n                  "language": {                      "aria": {                          "sortascending": ": activate sort column ascending",                          "sortdescending": ": activate 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 initial value                  "pagelength":10,                   "dom": "<'row' <'col-md-12'b>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable                  // uncomment below line("dom" parameter) fix dropdown overflow issue in datatable cells. default datatable layout                  // setup uses scrollable div(table-scrollable) overflow:auto enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js).                   // when dropdowns used scrollable div should removed.                   //"dom": "<'row' <'col-md-12't>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",              });          }

jquery , ajax code table :-

 $('#paymentdetails').click(function(){  					if( $(".datepickerinputfrom").val() > $(".datepickerinputto").val())  						{  						alertify.alert('from date should not greater  date')  						return false;  						$(".datepickerinputfrom").val ="";  						}  					var getdata = basepath +'adminfinance/getstudentpaymentsfordate/?fromdate='+$(".datepickerinputfrom").val() + '&todate='+$(".datepickerinputto").val()  					    					  if (($(".datepickerinputfrom").val() == "") && ($(".datepickerinputto").val() == ""))  					  {                               alertify.alert('please select dates proceed.')  							return false;  					  } else if (($(".datepickerinputfrom").val() == "") || ($(".datepickerinputto").val() == ""))  					  {                               alertify.alert('please select dates proceed.')  							return false;  					  }  				                                              				$.ajax({                          url: getdata                           , async: false                          , success: function (response) {                             //  alert(response[0]);                              //$('#financetbl tbody').empty();  							$('#financetbl tbody').empty();  							                             // if (response.resultcourse != '' && response[0]!= 'null') {  						    if (response.length > 0) {                               var tr;                                   (var = 0; < response.length; i++) {                                   tr = '<tr>'                                   tr += "<td>" + response[i].transactiondate+ "</td>";                                   tr += "<td>" + response[i].applicationnumber+ "</td>";                                   tr += "<td>" + response[i].applicantname+ "</td>"                                                                   tr += '</tr>'                                  $('#financetbl tbody').append(tr);  								}  								  								inittable();                                 console.log(response)  							                                }                              else {  								console.log(response)                                  alertify.alert("error : no payments details found");  								  								inittable();  								                              }                          }                      });  				});

i have tried below option nothing working me.

`$("#tbodyid tr").detach();  $("#tbodyid tr").remove();  $("#tbodyid").empty();  $("#tbodyid").html("");  $("tbody").empty();  $("tbody").html("");  $('#table').datatable().fndraw(false)`

you wanna de-initialize table data when there no data? try this?

// destroy first $('#yourtableid').datatable().fndestroy(); // initialize table again $('#yourtableid').datatable({ ... });