Problem z możliwością dodawania danych dynamicznych
Potrzebuję małej pomocy w jQuery MobileFoo Table. Dodam dane dynamicznie w tabeli.
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>
kod 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();
});
Dzięki temu FooTable jest prawidłowo stosowany po pierwszym otwarciu. Jeśli kliknę przycisk strony głównej i wrócę i ponownie wejdę na tę stronę, FooTable nie zostanie zastosowany prawidłowo.
Zrzut ekranu:
Tak więc problemy, z którymi obecnie się mierzę, obejmują:
Pokazane są ukryte pola. (Nie oznacza Footable nie jest stosowana): Ten problem rozwiązuje się po dwukrotnej zmianie orientacji w urządzeniu.
Pierwsze pole nie zawiera już przycisku Data Expand (nie oznacza Footable nie jest stosowane):
Myślę, że problem polega na tym, że usuwam stare wiersze i dodajemy nowe. Próbowałem bez rezygnacji z połączenia. W tym czasie stare wiersze były wyświetlane poprawnie. Nowo dodane pola miały problemy, jak pokazano na zrzucie ekranu.
Czy ktoś może mi w tym pomóc?
P.S: renderuję to w przeglądarce internetowej Android. Ten sam problem występuje również w przeglądarce.