Android 添加动态数据时footable中的问题

我需要一些jQuery手机方面的帮助。 我正在表中动态添加数据

HTML:

SRN
失效日期
投诉报告日期
约定日期
客户名称
记录时间
创建FSR
开放日
SRN分配的时间
SRN状态
ESN编号
请求类型
服务请求详细信息

js代码：

$("#page-id").live('pagebeforeshow', function() {
    console.log("Page before show");
    $("#tblSRNDetails > tbody tr").remove();
    for (var indx = 0; indx < 2; indx++ )
    {
        $("#tblSRNDetails > tbody").append("<tr>"+
        "<td>Name</td>"+
        "<td>failureDate</td>"+
        "<td>complaintReportDate</td>"+
        "<td>promisedDate</td>"+
        "<td>custName</td>"+
        "<td><a href='#'><b>Log Time</b></a></td>"+
        "<td><b>Create FSR</b></td>"+
        "<td>daysOpen</td>"+
        "<td>allocatedTime</td>"+
        "<td>srn_status</td>"+
        "<td>ESNNumber</td>"+
        "<td>requestType</td>"+
        "<td>customerComplaint</td>"+
        "</tr>");   
    }
    $('#tblSRNDetails').footable();
});

$（“#页面id”）.live（'pagebeforeshow'，function（）{
控制台日志（“显示前的页面”）；
$（“#tblSRNDetails>tbody tr”）.remove（）；
对于（var indx=0；indx<2；indx++）
{
$（“#tblSRNDetails>tbody”）。追加（“”+
“姓名”+
“失效日期”+
“投诉报告日期”+
“承诺人”+
“客户名称”+
""+
“创建FSR”+
“daysOpen”+
“分配的时间”+
“srn_状态”+
“ESNNumber”+
“请求类型”+
“客户投诉”+
"");   
}
$（'tblSRNDetails'）.footable（）；
});

首次打开时，可正确使用此脚踏板。如果我点击主页按钮并返回，然后再次进入该页面，则脚踏板应用不正确

截图：

因此，我当时面临的问题包括：

显示隐藏字段。（表示不适用脚踏式）： 在设备中更改方向两次后，此问题得到解决

第一个字段不再包含数据展开按钮（表示不应用Footable）：

我认为问题是因为我删除了旧的行并添加了新的行。我没打电话就试了。当时，旧行被正确显示。新添加的字段出现问题，如屏幕截图所示

有人能帮我吗

附言：我正在android网络视图中呈现这一点。同样的问题也在浏览器中重现。

是作为jQuery插件创建的，因此从未打算与jQuery Mobile一起使用。这只是另一个不能与jQuery mobile正常工作的插件不知道如何处理jQuery移动页面切换

使其工作的唯一方法是每次访问该页面时动态创建整个表。在任何其他情况下，都将无法工作，因为页面已经存在，并且具有增强的表标记。这就是为什么每个jQuery移动小部件都有一个具有刷新属性的函数

下面是一个工作示例：

最后一件事，如果这对您来说不是一个好的解决方案，您应该切换到的jQuery移动实现

$(document).on('pageshow', '#index', function(){  
    $("#tblSRNDetails").remove();
    $('<table>').attr({'id':'tblSRNDetails','class':'footable'}).appendTo('[data-role="content"]');
        $("#tblSRNDetails").append(
            "<thead><tr>"+
            "<th data-class='expand'>SRN</th>"+
            "<th >Failure Date</th>"+
            "<th >Complaint Report Date</th>"+
            "<th>Promised Date</th>"+
            "<th >Customer Name</th>"+
            "<th >Log Time</th>"+
            "<th >Create FSR</th>"+
            "<th  data-hide='phone,tablet'>Days Open</th>"+
            "<th  data-hide='phone,tablet'>SRN Allocated Time</th>"+
            "<th  data-hide='phone,tablet'> SRN Status</th>"+
            "<th  data-hide='phone,tablet'> ESN Number</th>"+
            "<th  data-hide='phone,tablet'> Request Type</th>"+
            "<th  data-hide='phone,tablet'>Service Request Details</th>"+
            "</tr></thead>");  
    for (var indx = 0; indx < 2; indx++ )
    {
        $("#tblSRNDetails").append(
            "<tbody><tr>"+
            "<td>Name</td>"+
            "<td>failureDate</td>"+
            "<td>complaintReportDate</td>"+
            "<td>promisedDate</td>"+
            "<td>custName</td>"+
            "<td><a href='#'><b>Log Time</b></a></td>"+
            "<td><b>Create FSR</b></td>"+
            "<td>daysOpen</td>"+
            "<td>allocatedTime</td>"+
            "<td>srn_status</td>"+
            "<td>ESNNumber</td>"+
            "<td>requestType</td>"+
            "<td>customerComplaint</td>"+
            "</tr></tbody>");   
    }
    $('#tblSRNDetails').footable();
});

$(document).on('pagebeforeshow', '#second', function(){       

});

$（document）.on（'pageshow'，'#index'，function（）{
$（“#tblSRNDetails”）.remove（）；
$（''）.attr（{'id'：'tblSRNDetails'，'class'：'footable'}）.appendTo（'[data role=“content”]'）；
$（“#tblSRNDetails”）。追加(
""+
“SRN”+
“故障日期”+
“投诉报告日期”+
“承诺日期”+
“客户名称”+
“记录时间”+
“创建FSR”+
“开放日”+
“SRN分配的时间”+
“SRN状态”+
“ESN编号”+
“请求类型”+
“服务请求详细信息”+
"");  
对于（var indx=0；indx<2；indx++）
{
$（“#tblSRNDetails”）。追加(
""+
“姓名”+
“失效日期”+
“投诉报告日期”+
“承诺人”+
“客户名称”+
""+
“创建FSR”+
“daysOpen”+
“分配的时间”+
“srn_状态”+
“ESNNumber”+
“请求类型”+
“客户投诉”+
"");   
}
$（'tblSRNDetails'）.footable（）；
});
$（document）.on（'pagebeforeshow'，'#second'，function（）{
});

我在web应用程序中遇到了同样的问题，我在datatables.net回调中使用了这个问题，我添加了footable的redraw函数，它工作得非常好

$('table').trigger('footable_redraw');

---

“Footable”与“jQuery Mobile”配合使用效果很好。我将用我的代码片段解释它的用法

可脚踏初始化

function initFootable() {
    $(function () {
        $('.footable').footable({ //.footable is my class for table
            breakpoints: {
                phone: 480, //Breakpoint width for phones
                tablet: 1024 //Breakpoint width for tablets
            }
        });
    });
}

我使用jqueryajax调用获取新的表数据，并使用模板方法将它们添加到表中。我正在使用handlebar.js作为模板。（请记住，此模板方法不是强制性的。您可以使用自己的方法将新行追加到表中。）

因此，在将新数据更新到表中后，需要触发footable进行重新初始化。下面是代码片段

function updateFootable() {
    var paramTable = $('.footable');
    paramTable.footable();
    paramTable.trigger('footable_initialize'); //Reinitialize
    paramTable.trigger('footable_redraw'); //Redraw the table
    paramTable.trigger('footable_resize'); //Resize the table
}

这里的所有触发器都不是必需的。根据您在重新初始化/重绘/调整大小时遇到的问题，检查并确认调用哪个触发器对您刚好足够

就这样，现在在jQuery Mobile中使用footable不会有任何问题

重要提示：但是，在调用updateFootable（）时必须小心，如果包含该表的div或包含该表的页面被隐藏，则不会相应地调整该表的大小。在调用表的更新时，必须确保该表可见

链接：

这是脚踏触发器的文档-

确保通过可步行文档-

---

我能知道否决票的原因吗？在发布问题之前，我已经尽了最大努力在谷歌上搜索，你使用的JQM是哪个版本的jquery

.live

被折旧并替换为上的

。另外，请尝试在附加项
$（“[data role=page]”）后添加此项。触发器（'create'）
@Omar jQM version 1.2.0<代码>.on

不起作用。我尝试添加

$（'[data role=page]'）。在添加数据后触发（'create'）

。日分

function updateFootable() {
    var paramTable = $('.footable');
    paramTable.footable();
    paramTable.trigger('footable_initialize'); //Reinitialize
    paramTable.trigger('footable_redraw'); //Redraw the table
    paramTable.trigger('footable_resize'); //Resize the table
}