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

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

Voici 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);
        }

OriginalL'auteur Steve Fischer | 2011-03-28

  1. 2

    Probablement le problème n'est pas dans la partie de code que vous avez posté. Par exemple, dans le code actuel, vous utilisez toujours += opération avec le newPropertyRows variable. Êtes-vous réinitialiser la chaîne vide avant chaque appel ajax?

    Par la manière dont il me semble que vous n'appelez pas $("#featured_listing_tbody").children( 'tr:not(:first)' ).remove() au début de success gestionnaire parce que vous utilisez $("#featured_listing_tbody").html(newPropertyRows); plus tard, qui va remplacer l'ensemble du corps de la table.

    OriginalL'auteur Oleg

  2. 2

    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 que les lignes de la table. Comme vous êtes déjà à la génération de la page, vous devriez avoir de la logique ou de modèle pour le faire à nouveau facilement.

    Pour remplacer les données, je voudrais juste comprendre un <tbody> balise autour de vos lignes de données, et dans votre ajax succès fonction il suffit de remplacer son contenu, au lieu de faire compliqué sélecteur d'omettre la première ligne du tableau qui, je suppose êtes-vous 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>
    ok, je comprends un comme l'idée. mais comme les résultats de croître au fil du temps j'ai peur que les données supplémentaires de ralentir le processus. suis-je fou(ne pas awnser ça lol)
    Le téléchargement de quelques lignes de la table et à les exprimer sera plus rapide qu'en parcourant des données et de la création à la volée, en particulier avec les compteurs et d'autres choses. De cette façon, la charge sur votre serveur et pas sur les utilisateurs (potentiellement âge de pierre) du navigateur.

    OriginalL'auteur Dunhamzzz

  3. 1

    Pas tout à fait sûr si vous stockez le record de la table ou du temps réel et ne sont pas stockées n'importe où.

    Mais s'il est stocké, vous pouvez essayer de générer le code html pour l'ensemble de la table ou tout simplement les lignes sur le côté serveur et il suffit ensuite de remplacer le conteneur /contenu de la table avec les données reçues du serveur.

    OriginalL'auteur Johann du Toit