Problem in footable beim hinzufügen dynamischer Daten

Foo Tabelle wurde als ein jQuery-plugin, und als solche war nie beabsichtigt, die Arbeit mit jQuery Mobile. Es ist einfach nur ein plugin nicht richtig funktioniert mit jQuery mobile. Foo Tabelle nicht wissen, wie man mit jQuery Mobile-Seite wechseln.

Einzige Weg, können Sie damit es funktioniert, ist, wenn Sie dynamisch erstellen ganze Tabelle, jedes mal, wenn Sie diese Seite besuchen. In jedem anderen Fall Foo Tabelle wird nicht funktionieren, weil die Seite ist schon da, mit erweiterten Tabellen-markup-Code. Das ist, warum jeder jQuery-Mobile-widget hat eine Funktion mit einer Aktualisierung-Eigenschaft.

Hier ist ein funktionierendes Beispiel: http://jsfiddle.net/Gajotres/PjmEL/

Eine Letzte Sache, wenn dies nicht eine gute Lösung für Sie sollten Sie wechseln, um jQuery Mobile Umsetzung von dynamische Tabelle.

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

});

'Footable' arbeitet mit 'jQuery Mobile'. Ich werde erklären, die seine Verwendung mit meinem code-Schnipsel.

Footable Initialisierung,

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

Bin ich mithilfe von jQuery-AJAX-Aufruf, um neue Tabelle-Daten und fügen Sie Sie der Tabelle mit templating-Methode. Ich bin mit handlebars.js für das templating. (Denken Sie daran, diese Template-Methode ist nicht zwingend erforderlich. Sie können Ihre eigenen Methoden, um neue Zeilen angefügt, um Ihren Tisch).

So, nachdem Sie aktualisiert haben neue Daten in die Tabelle, die Sie auslösen müssen footable für die re-Initialisierung. Hier ist der code-snippet,

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
}

Alle Trigger sind hier nicht notwendig. Überprüfen und bestätigen Sie den Aufruf auslöst, ist gerade genug für Sie, da Sie nach dem Punkt, den Sie haben, mit re-Initialisierung/Neuzeichnen/Größenänderung.

Das ist es, werden Sie nicht ein problem mit footable mit jQuery Mobile jetzt.

WICHTIG: Allerdings müssen Sie vorsichtig sein, während der Aufruf updateFootable(), wenn das div-Element mit der Tabelle, oder die Seite mit der Tabelle ausgeblendet ist, dann wird die Tabelle nicht dementsprechend geändert. Sie müssen sicherstellen, dass die Tabelle sichtbar ist, wenn Sie anrufen, um Ihre update.

Links:

Hier ist die doc für footable-Trigger - http://fooplugins.com/footable/demos/triggers.htm#docs

Stellen Sie sicher zu gehen über footable docs -
http://fooplugins.com/footable-demos/