在ajax调用后尝试调整表格大小时触发器触发器不工作

Question

我在整个网站中使用可触发的表格我正在创建，直到现在它主要是简单的航行，但是当添加服务器端分页到表格时， 。基本上，我通过ajax调用获取数据，当页面首次加载所有内容时，脚本已正确初始化并且列在移动视图中折叠，但是当我按下一页按钮时，新数据将添加到表中，但在移动视图中列不会折叠。见下文图像：

为了清楚的目的，也有在该网页上的多个footable表，表格上方使用jquery.responsiveTabs插件一个选项卡控制内部实现。如果我最大化然后使浏览器最小化，则可脚踏断点将添加到新行，并且列会折叠。

当添加新行的表，我使用的高级演示功能提供了ajax演示here

我的Ajax请求的实现如下：

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

这是相同的除了通过ID而不是元素引用表格之外，脚注文档中的代码。我还尝试了其他footable触发器，例如footable_resize，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> 

，只是下面的脚本声明我初始化footable如下：

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

我也试过下面我已成功添加到选项卡激活事件，每当我更改标签时触发。

var table = $('.footable').footable(); 
table.trigger('footable_resize'); 

但是，当我在页面初始化后的ajax调用后运行这段代码时，在控制台中出现以下错误。

类型错误$（...）。footable不是一个函数

我在我的智慧，现在结束与这一点，我真的不希望有沟footable并在这么晚的找一个替代阶段。我在这里和谷歌浏览各种问题，没有解决我的问题，所以任何帮助将大量赞赏！

Answer 1

没有看到表本身的标记，很难完全确定问题，但我会去看看我看到的问题。

我从来没有使用responsiveTabs，但我有一个快速浏览文档。当改变标签你需要使用responsiveTabs的激活回调插件象下面这样来调整footable：

$("#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（）来初始化一个表。