2

我在我正在创建的整个网站中都使用了适合的表格，到目前为止，它主要是一帆风顺的，但是在将服务器端分页添加到表格时我遇到了困难。基本上我是通过 ajax 调用获取数据，当页面第一次加载时，一切都很好，footable 被正确初始化并且列在移动视图中折叠，但是当我按下下一页按钮时，新数据被添加到表中但是在移动视图中列不会折叠。见下图：

在此处输入图像描述

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

将新行添加到表中时，我使用的是此处的高级演示功能中提供的 ajax 演示

我的ajax请求实现如下：

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

除了通过 ID 而非元素来引用表格之外，这与 footable 文档中的代码相同。我还尝试了其他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 不是函数

我现在对此束手无策，我真的不想在这个后期阶段放弃脚踏实地并找到替代方案。我已经在这里和谷歌上搜索了各种问题，但没有人能解决我的问题，所以任何帮助都将不胜感激！！！

4

1 回答 1

2

如果没有看到表格本身的标记，很难完全确定问题，但我会解决我看到的问题。

我从未使用过 responsiveTabs，但我快速浏览了文档。更改选项卡时，您需要使用 responsiveTabs 插件的激活回调来调整 footable 的大小，如下所示：

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

这是将数据添加到现有脚注的正确方法，我以您的 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() 来初始化表格一次。

于 2016-04-09T17:50:25.200 回答