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

Question

我在我正在创建的整个网站中使用 footable tables 直到现在它主要是一帆风顺但是我在将服务器端分页添加到 table。基本上我通过 ajax 调用获取数据，当页面首次加载时一切正常 footable 被正确初始化并且列在移动视图中折叠，但是当我按下下一页按钮时新数据已添加到 table，但在移动视图中，列不会折叠。见下图：

为了清楚起见，此网页上有多个 footable table，上面的 table 使用 jquery.responsiveTabs 在选项卡控件中实现插入。如果我最大化然后最小化浏览器 footable 断点被添加到新行并且列折叠。

将新行添加到 table 时，我使用的是高级演示功能 here

中提供的 ajax 演示

我对ajax请求的实现如下：

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

这与 footable 文档中的代码相同，除了通过 ID 而不是元素来引用 table。我还尝试了其他 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 调用后运行执行此操作时，我在控制台中收到以下错误。

typeerror $(...).footable 不是函数

我现在已经束手无策了，我真的不想在这个后期放弃 footable 并找到替代方案。我在这里浏览了各种问题，google 和 none 找到了我的问题的解决方案，因此非常感谢任何帮助！！！

Answer 1

没有看到 table 本身的标记，很难完全确定问题所在，但我会解决我看到的问题。

我从未使用过 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() 来初始化 table 一次。

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

Footable triggers not working when trying to resize table after ajax call

javascript

jquery

footable