Datatable not cleared usage - php

Question

I am creating a simple report in PHP and AJAX displayed on Datatable.
The user shall be able to select the from date and to date, then data will be display according to the selected dates.
My problem is if I select no sales dates, the data are not cleared and still show the previous records, I don't understand why.
I attached the screenshot of the form below
I tried to achieve this with the code below
function get_all()
{
var total=0;
var amount=0;
var from_date = $('#from_date').val();
var to_date = $('#to_date').val();
$('#tbl-projects').dataTable().fnDestroy();
$.ajax({
url:"all_sales.php",
type: "POST",
dataType: 'JSON',
data:{from_date:from_date, to_date:to_date},
success: function (data)
{
$('#tbl-projects').dataTable({
dom: 'Bfrtip',
buttons: [
, 'excel', 'pdf', 'print'
],
"aaData": data
,
"scrollX": true,
"aoColumns": [
{"sTitle": "Member No", "mData": "mno"},
{"sTitle": "Member Name", "mData": "pname"},
{"sTitle": "Amount", "mData": "amount"},
{"sTitle": "Month", "mData": "months"},
{"sTitle": "Payment Date", "mData": "paydate"},
]
});
data.forEach(function(recordInLoop)
{
amount += Number(recordInLoop.amount);
});
$('#amount').val(amount);
},
error: function (xhr) {
console.log('Request Status: ' + xhr.status );
console.log('Status Text: ' + xhr.statusText );
console.log(xhr.responseText);
var text = $($.parseHTML(xhr.responseText)).filter('.trace-message').text();
console.log(text)
}
});
}

Answer 1

function get_all()
{
var total=0;
var amount=0;
var from_date = $('#from_date').val();
var to_date = $('#to_date').val();
$('#tbl-projects').dataTable().fnDestroy();
$.ajax({
url:"all_sales.php",
type: "POST",
dataType: 'JSON',
data:{from_date:from_date, to_date:to_date},
success: function (data)
{
$('#tbl-projects').dataTable({
dom: 'Bfrtip',
buttons: [
, 'excel', 'pdf', 'print'
],
"aaData": data
,
"scrollX": true,
"aoColumns": [
{"sTitle": "Member No", "mData": "mno"},
{"sTitle": "Member Name", "mData": "pname"},
{"sTitle": "Amount", "mData": "amount"},
{"sTitle": "Month", "mData": "months"},
{"sTitle": "Payment Date", "mData": "paydate"},
]
});
data.forEach(function(recordInLoop)
{
amount += Number(recordInLoop.amount);
});
$('#amount').val(amount);
},
error: function (xhr) {
console.log('Request Status: ' + xhr.status );
console.log('Status Text: ' + xhr.statusText );
console.log(xhr.responseText);
var text = $($.parseHTML(xhr.responseText)).filter('.trace-message').text();
// Reset text box
$('#from_date').val('');
$('#to_date').val('');
console.log(text)
}
});
}
</script>
OR
$('#from_date').datepicker('setDate', null);
$('#to_date').datepicker('setDate', null);