Ich brauche ein bisschen Hilfe in jQuery MobileFoo Tisch. Ich füge Daten dynamisch in eine Tabelle ein.

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 code:

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

Damit wird FooTable beim ersten Öffnen richtig angewendet. Wenn ich auf die Schaltfläche für die Startseite klicke und zurück gehe und diese Seite erneut aufrufe, wird FooTable nicht ordnungsgemäß angewendet.

Bildschirmfoto:

Zu den Problemen, mit denen ich derzeit konfrontiert bin, gehören:

Versteckte Felder werden angezeigt. (Bedeutet, dass Footable nicht angewendet wird): Dieses Problem wird behoben, nachdem die Ausrichtung im Gerät zweimal geändert wurde.

Das erste Feld enthält keine Schaltfläche zum Erweitern von Daten mehr (bedeutet, dass Footable nicht angewendet wird):

Ich denke, das Problem ist, weil ich die alten Zeilen entferne und neue hinzufüge. Ich habe versucht, ohne Anruf zu entfernen. Zu diesem Zeitpunkt wurden die alten Zeilen ordnungsgemäß angezeigt. Neu angehängte Felder hatten Probleme, wie im Screenshot gezeigt.

Kann mir jemand dabei helfen?

PS: Ich rendere dies in Android Webview. Das gleiche Problem tritt auch im Browser auf.