Javascript 在ajax调用后尝试调整表大小时，Footable触发器不起作用

在我创建的网站中，我一直在使用可移动的表格，到目前为止，它主要是一帆风顺的，但是我在将服务器端分页添加到表格时遇到了问题。基本上，我是通过ajax调用获取数据的，当页面第一次加载时，一切都可以正常进行初始化，列在mobile view中折叠，但是当我按下下一页按钮时，新数据被添加到表中，但是在mobile view中列不会折叠。见下图：

为了清晰起见，此网页上有多个可移动的表格，上面的表格是使用jquery.responsiveTabs插件在选项卡控件内实现的。如果我将浏览器最大化，然后将其最小化，则可移动断点将添加到新行，列将折叠

在向表中添加新行时，我使用的是高级演示函数中提供的ajax演示

我对ajax请求的实现如下所示：

$.ajax({
    url: '/myurl/getdata/',
    success : function(data) {
        $('#despatchTbl tbody').append(data).trigger('footable_redraw');
    }
});

<script language="javascript">
    $(function() {
       $('.footable').footable()
    }); 
</script>

这与footable文档中的代码相同，只是通过ID而不是元素引用表。我也尝试过其他的footable触发器，例如footable_resize、footable_initialize和一个新的footable_initialize，我添加了一个新的触发器来解决交换选项卡footable_force_resize时的类似问题，但没有运气，控制台中也没有错误

我的脚本将按以下顺序声明：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="/scripts/footable.js" type="text/javascript"></script>
<script src="/scripts/jquery.responsiveTabs.js" type="text/javascript"></script>
<script type="text/javascript" src="/scripts/ajaxlibs.js"></script>

但是，当我在页面初始化后的ajax调用后运行此命令时，控制台中出现以下错误

typeerror$（…）。footable不是一个函数

---

我现在对此束手无策，我真的不想在这么晚的时候不得不放弃脚踏实地，寻找替代方案。我已经在这里和谷歌搜索了各种各样的问题，没有一个能解决我的问题，所以任何帮助都将不胜感激

在没有看到表本身的标记的情况下，很难完全确定问题所在，但我将继续讨论我看到的问题

我从未使用过responsiveTabs，但我快速查看了文档。更改选项卡时，您需要使用响应选项卡的激活回调插件调整脚踏板的大小，如下所示：

$("#tabs").responsiveTabs({
    rotate: false,
    startCollapsed: 'accordion',
    collapsible: 'accordion',
    activate: function(e, tab) {
      $('.footable').trigger('footable_resize');
    }
});

以下是向现有footable添加数据的正确方法，我使用了您的ajax成功处理程序作为示例：

$.ajax({
    url: '/myurl/getdata/',
    success : function(data) {
        // this gets the data within the footable
        $footable = $('#despatchTbl').data('footable');

        // use footables appendRow to ensure correct pagination
       $footable.appendRow(data);
    }
});

---

您只需在页面加载时调用$（'.footable'）.footable（）来初始化一次表。

谢谢！！经过一番摸索和犯错，我终于找到了答案，但我从来没有抽出时间来更新我的问题。你的解决方案看起来确实比我的要干净一些，所以我会修改我的代码。谢谢Gary，我意识到这是一个老问题，但我想我应该发布一个解决方案，因为我带着同样的问题来到这里。很高兴这对你有所帮助！

$.ajax({
    url: '/myurl/getdata/',
    success : function(data) {
        // this gets the data within the footable
        $footable = $('#despatchTbl').data('footable');

        // use footables appendRow to ensure correct pagination
       $footable.appendRow(data);
    }
});