android - 添加动态数据时在footable问题

我需要一些jquery mobileFoo Table方面的帮助。
我正在一个表中动态添加数据。
HTML：

    <table id="tblSRNDetails" class="footable">
        <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>
        <tbody>
        </tbody>
    </table>

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();
});

当第一次打开时，可正确使用此脚踏板。如果单击主页按钮并返回，然后再次访问该页，则无法正确应用脚踏板。
截图：
所以我当时面临的问题包括：
显示隐藏字段。（表示不适用于Footable）：
在设备中改变方向两次后，此问题得到解决。
第一个字段不再包含数据扩展按钮（表示不应用Footable）：
我认为问题是因为我正在删除旧的行并添加新的行。我试过了，但没有打电话。那时，旧的一行被正确地显示出来了。新添加的字段出现问题，如屏幕截图所示。
有人能帮我吗？
备注：我正在android网络视图中呈现这个。同样的问题也会在浏览器中重现。

最佳答案

Foo table是作为jquery插件创建的，因此从未打算使用jquery mobile。它只是另一个不能正确使用jquery mobile的插件。Foo table不知道如何处理jquery移动页面切换。
唯一可行的方法是每次访问该页时动态创建整个表。在任何其他情况下，Foo table都将不起作用，因为页面已经存在了增强的表标记。这就是为什么每个jquery移动小部件都有一个带有刷新属性的函数。
下面是一个工作示例：http://jsfiddle.net/Gajotres/PjmEL/
最后，如果这不是一个好的解决方案，您应该切换到jquery mobile实现dynamic table。

$(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(){

});