Problème en veille lors de l'ajout de données dynamiques

J'ai besoin d'aide pour jQuery Mobile Foo Table . J'ajoute des données dynamiquement dans une table.

HTML:

  • Android Google Maps v2, MAP_TYPE_NONE et carrés noirs
  • Comment utiliser la méthode registerReceiver?
  • AdjustResize ne fonctionne pas dans la sucette et au-dessus avec l'état translucide / Nav
  • Renvoi vers un fragment d'un dialogue de fragmentation
  • Tutoriels et bibliothèques pour les jeux OpenGL-ES sur Android
  • Enregistrement d'un bouton casque cliquez avec BroadcastReceiver dans Android
  • <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> 

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

    Avec ce FooTable est appliqué correctement lorsqu'il est ouvert pour la première fois. Si je clique sur le bouton de la page d'accueil et revenons en arrière, et revenons sur cette page, FooTable n'est pas correctement appliqué.

    Capture d'écran:

    Entrez la description de l'image ici

    Les problèmes auxquels je suis confronté à ce moment-là incluent:

    1. Les champs cachés sont affichés. (Signifie que Footable n'est pas appliqué): ce problème est résolu après modification de l'orientation dans l'appareil pour deux fois.

    2. Le premier champ n'inclut pas le bouton Développer les données (signifie que Footable n'est pas appliqué):

    Je pense que le problème est parce que je supprime les anciennes lignes et j'ajoute de nouvelles. J'ai essayé sans donner l'appel de suppression. À ce moment-là, les anciennes lignes étaient affichées correctement. Les champs nouvellement ajoutés ont des problèmes comme le montre la capture d'écran.

    Quelqu'un peut il m'aider avec ça?

    PS: Je rends cela dans la visionneuse Android. Et le même problème est également reproduit dans le navigateur.

  • Stockez une clé ou un mot de passe de manière sécurisée localement sur Android
  • Où sont les schémas pour les fichiers XML sur un projet Android?
  • NotificationListenerService Implementation
  • Fond d'écran Android avec image dégradée et carrelée
  • Barre de progression arrondie des deux côtés dans Android
  • Quelles sont les différences entre R.styleable, R.style et R.attr?
  • 3 Solutions collect form web for “Problème en veille lors de l'ajout de données dynamiques”

    La table Foo a été créée en tant que plugin jQuery et, en tant que telle, n'a jamais été conçue pour fonctionner avec jQuery Mobile. C'est simplement qu'un autre plugin ne fonctionne pas correctement avec jQuery mobile. La table Foo ne sait pas comment gérer le changement de page jQuery Mobile.

    La seule façon de le faire fonctionner est si vous créez dynamiquement une table entière chaque fois que vous visitez cette page. Dans tous les autres cas, la table Foo ne fonctionnera pas car la page est déjà là avec un marquage de table amélioré. C'est pourquoi chaque widget de jQuery Mobile a une fonction avec une propriété de rafraîchissement.

    Voici un exemple de travail: http://jsfiddle.net/Gajotres/PjmEL/

    Une dernière chose, si ce n'est pas une bonne solution pour vous, vous devez passer à la mise en œuvre jQuery Mobile de la table dynamique .

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

    J'ai eu le même problème dans mon application Web que j'utilisais dans datatables.net en rappel J'ai ajouté une fonction de redessin de footable et ça marche parfaitement.

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

    'Footable' fonctionne très bien avec 'jQuery Mobile'. Je vais expliquer son utilisation avec mes extraits de code.

    Initialisation simplifiable,

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

    J'utilise l'appel JQuery AJAX pour obtenir de nouvelles données de table et les ajouter à la table à l'aide d'une méthode de modélisation. J'utilise handlebars.js pour la modélisation. (Rappelez-vous, cette méthode de planification n'est pas obligatoire. Vous pouvez utiliser vos propres méthodes pour ajouter de nouvelles lignes à votre table.)

    Donc, après avoir mis à jour de nouvelles données sur la table, vous devez déclencher une mise en veille pour la réinitialisation. Voici l'extrait de code,

     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 } 

    Tous les déclencheurs ici ne sont pas nécessaires. Vérifiez et confirmez l'appel, quel déclencheur suffit pour vous, selon le problème que vous rencontrez avec la réinitialisation / redimensionnement / redimensionnement.

    C'est ça, vous n'aurez aucun problème avec l'utilisation de footable avec jQuery Mobile maintenant.

    IMPORTANT: Cependant, vous devez faire attention tout en appelant updateFootable (), si le div contenant la table ou la page contenant la table est cachée, la table ne sera pas redimensionnée. Vous devez vous assurer que la table est visible pendant que vous appelez pour sa mise à jour.

    Des liens:

    Voici le document pour les déclencheurs footable – http://fooplugins.com/footable/demos/triggers.htm#docs

    Assurez-vous de passer à travers les doigts footable – http://fooplugins.com/footable-demos/

    coAndroid est un fan Android de Google, tout sur les téléphones Android, Android Wear, Android Dev et Android Games Apps.