Jquery Footable redraw issue

Question

am currently using jquery footable in my project below is my code for load data with table,

<table class="table table_striped toggle-arrow-tiny" data-show-toggle="true" data-filtering="true" data-sorting="true" data-paging="true" data-paging-position="right" id="banner_stats">
</table>
$(document).ready(function(){
    load_data();
});
function load_data(from=FALSE,to=FALSE)
{
    var column = '<?php echo site_url('advertiser/event_statistics/fetch_data_column'); ?>';
    var low_rows = '<?php echo site_url('advertiser/event_statistics/fetch_data_row'); ?>'+from+'/'+to;

    var ft = FooTable.init('#banner_stats', {
    "columns": $.ajax({dataType: 'json',url:column}),
    "rows": $.ajax({dataType: 'json',url:low_rows})
});

}

On page load I fetch data from db for last 7 days , So I get empty result because no data for last 7 days so table load with "NO RESULTS" like below,

User can able to filter data using date picker below is that code

$("#date").on('change',function(){
 var from = $("#from").val();
var to = $("#to").val();
load_data(from,to)
});

During filter I get data from db the result data append with "NO RESULTS", like below

How to redraw table with new data? Anyhelp appreciated

Answer 1

You need to first empty the table and then initiate it with the new data.

$('#banner_stats').empty();
var ft = FooTable.init('#banner_stats', {
    "columns": $.ajax({dataType: 'json',url:column}),
    "rows": $.ajax({dataType: 'json',url:low_rows})

Answer 2

Solution got it, Just make empty table before load data to the table like below,

function load_data(from=FALSE,to=FALSE)
{
    **$("#banner_stats").html("");**

    var column = '<?php echo site_url('advertiser/event_statistics/fetch_data_column'); ?>';
    var low_rows = '<?php echo site_url('advertiser/event_statistics/fetch_data_row'); ?>'+from+'/'+to;

    var ft = FooTable.init('#banner_stats', {
    "columns": $.ajax({dataType: 'json',url:column}),
    "rows": $.ajax({dataType: 'json',url:low_rows})
});

}