Jquery Footable重绘问题

Question

我目前使用jquery footable在我的项目下面是我的代码加载数据与表，

<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})
});

}

在页面加载时，我从db获取最近7天的数据，因此我得到的结果为空，因为最近7天没有数据，所以表加载时没有结果，如下所示，

​

用户可以使用日期选择器过滤数据，下面是代码

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

在过滤过程中，我从db获取数据，结果数据附加了"NO result“，如下所示

​

如何用新数据重新绘制表？感谢任何帮助

Answer 1

您需要首先清空该表，然后使用新数据启动它。

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

Answer 2

解决方案明白了，只需在将数据加载到表中之前创建空表，如下所示，

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})
});

}