JQuery 移动响应 table 不适用于动态构建 table，即使在刷新后也是如此

Question

我正在尝试制作一个 table，用户可以在其中选择要 show/hide 的列。 JQuery（我已经在我的站点中使用了）通过他们的 JQuery 移动 "responsive table" 小部件提供此功能，特别是 "column toggle" 变体。

如果我将 table 放在页面中，我可以让它完美地工作，所以我知道文件正在导入并且我的代码是正确的。问题是这个 table 是 Ajax 调用的结果，因此是在 $.post() 函数中构建的，并在构建后放置在页面上。这部分也可以很好地显示 table。但是，当 table 显示时，它没有响应。至少，它缺少最重要的 "columns..." link。在 $.post() 中，我像这样构建 table，然后附加到它： resultsTable = $("<table id='resultsTable' data-role='table' data-mode='columntoggle' data-column-btn-text='Show/Hide Columns...' class='ui-responsive'></table>");

我认为问题是 Jquery Mobile 无法连接到 table 的创建中来修改它，或者由于某些其他原因不知道它的存在。因此，我尝试在 $.post 结束之前刷新它： $("#resultsTable").table("refresh");

这没有效果。我试过移动它，以不同的方式调用 'refresh' 方法，并查看其他人是否遇到过这个问题。目前还没有结果。我知道解决方案一定很简单，但我找不到。我可以找到很多关于动态生成 tables 的内容，还有很多关于响应式 tables 的内容，但没有关于将它们一起使用的内容。我将不胜感激任何建议。提前致谢。

Answer 1

我建议先分配 .table()，然后再将其附加到 HTML。

在您的 $.post() 成功函数中，它可能看起来像：

var resultsTable = $("<table>", {
    'id':'resultsTable',
    'data-role':'table',
    'data-mode':'columntoggle',
    'data-column-btn-text':'Show/Hide Columns...',
    'class':'ui-responsive'
});
resultsTable.table();
resultsTable.appendTo("#results");

通过这种方式，元素在添加之前设置为响应式。

此外，refresh 不是 .table() 的方法或事件：https://api.jquerymobile.com/table/

我想你可以试试 .table('rebuild')。

Answer 2

将 table 附加到容器 DOM 元素后，在容器上调用 enhanceWithin()：

$("#tableCont").empty().append(resultsTable).enhanceWithin();

DEMO

点击演示中的按钮创建一个table。

JQuery 移动响应 table 不适用于动态构建 table，即使在刷新后也是如此

JQuery Mobile responsive table not working for dynamically built table, even after refresh

jquery

jquery-mobile

DEMO