jQuery remplacer les lignes de table avec de nouvelles données

Question

Je suis en train de remplacer une table par de nouvelles données que je reçois via ajax. La première fois fonctionne très bien, mais ensuite les lignes sont ajoutées au lieu de remplacées, donc je me retrouve avec des lignes en double.

est ici une partie de mon code:

  success: function(data){    
      $("#featured_listing_tbody").children('tr:not(:first)').remove(); 
      counter= 1; 
      $.each(data, function(i, val){ 
         newPropertyRows += '<tr>'; 
           $.each(val, function(key, info){ 
            var skip = false; 
             if(key == "Id") {           
               Id = info; 
               newPropertyRows += ''; 
               skip = true; 
             } 
             if(key == "thumbs"){ 
               info = '<img width="100px" src=uploads/properties/'+Id+'/thumbs/'+info+' />'; 
               newPropertyRows += '<td class="col'+counter+'"><a href="/featured.php?prop='+Id+'">'+info+'</a></td>'; 
               skip = true; 
               counter++;  
             } 
             if(skip == false){ 
               newPropertyRows += '<td class="col'+counter+'"><a href="/featured.php?prop='+Id+'">'+info+'</a></td>';      
               counter++;  
             } 

             info = ''; 
           });      
         newPropertyRows += '</tr>';       
      });      
       $("#featured_listing_tbody").html(newPropertyRows); 
     } 

Answer 1

Probablement le problème n'est pas dans la partie du code que vous avez publié. Par exemple, dans le code actuel, vous utilisez toujours l'opération += avec la variable newPropertyRows. Est-ce que vous le réinitialisez à la chaîne vide avant chaque appel ajax? Par ailleurs, il me semble que vous n'appelez pas $("#featured_listing_tbody").children('tr:not(:first)').remove() au début du gestionnaire parce que vous utilisez plus tard $("#featured_listing_tbody").html(newPropertyRows); qui écrasera tout le corps de la table.

Answer 2

Pas tout à fait sûr si vous stockez le dossier pour la table ou il est en temps réel et pas stockées.

Mais s'il est stocké, vous pouvez essayer de générer le code HTML pour la totalité de la table ou uniquement les lignes côté serveur, puis simplement remplacer le contenu conteneur/table par les données reçues du serveur.

Answer 3

J'ai une suggestion, au lieu de retourner un objet de données et de le convertir en HTML en javascript, il suffit de retourner les données comme les lignes de table requises. Comme vous les générez déjà pour la page, vous devriez avoir la logique/le modèle pour le faire facilement. Pour remplacer les données, j'ajouterais simplement une balise <tbody> autour de vos lignes de données, et dans votre fonction de succès ajax il suffit de remplacer son contenu - au lieu de faire le sélecteur compliqué pour omettre la première ligne du tableau que je suppose être les en-têtes de colonne .

$("#featured_listing tbody").html(data); //Replace contents of <tbody> tag 

Et la table:

<table> 
    <thead><tr>....row headers...</tr></thead> 
    <tbody>...data rows...</tbody> 
</table>