web-dev-qa-db-fra.com

Moyen rapide de remplir dynamiquement un tableau avec les données de JSON en JavaScript

J'expérimente avec jQuery, JSON, etc. et suis tombé sur la tâche suivante. J'ai un script de chargeur sur le serveur qui renvoie les données de la table au format JSON. Une fois les données JSON reçues, je souhaite remplir ma table avec elles. J'utilise actuellement un code similaire au suivant (il y a plus de colonnes et des traitements plus avancés, mais vous avez eu l'idée):

...
for (var key=0, size=data.length; key<size;key++) {

  $('<tr>')
            .append( $('<td>').html(
                data[key][0]
            ) )
            .append( $('<td>').addClass('whatever1').html(
                data[key][1]
            ) )
            .append( $('<td>').addClass('whatever2').html(
                data[key][2]
            ) )
            .appendTo('#dataTable');
}
...

<table id="#dataTable"></table>
...

Cela fonctionne assez bien. Mais une fois que les données grandissent, cela devient terriblement lent. Pour quelques centaines d'enregistrements, la construction de la table prend environ 5 secondes (Firefox, IE), ce qui est un peu lent. Si je par exemple créez le code HTML complet sur le serveur et envoyez-le sous forme de chaîne que j'inclus dans le tableau, ce sera assez rapide.

Alors, y a-t-il moyen plus rapide de remplir le tableau?

NOTE: / Je sais ce qu'est la pagination et je l'utiliserai à la fin, alors s'il vous plaît, ne dites pas "Pourquoi avez-vous besoin d'un si grand tableau sur votre page?" Cette question concerne la manière de remplir rapidement un tableau, quel que soit le nombre d'enregistrements à afficher :)

javascriptjqueryhtmljsondom
17
Jan Zyka

Voir ma réponse à une requête antérieure similaire utilisant des tableaux et "rejoindre".

N'utilisez pas du tout jQuery jusqu'à la fin, lorsque vous l'appelez une seule fois. En outre, coupez également la concaténation de chaînes en stockant les chaînes dans un tableau et en utilisant la méthode "join" pour créer la chaîne en une fois.

par exemple.

 var r = new Array(), j = -1;
 for (var key=0, size=data.length; key<size; key++){
     r[++j] ='<tr><td>';
     r[++j] = data[key][0];
     r[++j] = '</td><td class="whatever1">';
     r[++j] = data[key][1];
     r[++j] = '</td><td class="whatever2">';
     r[++j] = data[key][2];
     r[++j] = '</td></tr>';
 }
 $('#dataTable').html(r.join(''));
50
Neil

Essayez de reporter l'ajout de la table au DOM en cours d'exécution le plus tard possible.

var table = $('<table>');   // create a new table

// populate the rows
....  .append(table);

// replace the existing table all in one go
$('#dataTable').replaceWith(table);

Cela devrait empêcher toute mise en page jusqu'à ce que tout le tableau soit prêt.

Si les performances sont un réel problème, j'éviterais également d'appeler des méthodes nécessitant l'analyse de chaînes, comme tous ces appels $('<td>'). Pour un élément unique, les frais généraux sont probablement assez coûteux (bien que cela vaille la peine si vous avez une longue chaîne de code HTML).

Si je comprends bien, ajouter de grandes chaînes de balises en utilisant .append() ou .html() est supposé être assez efficace. Ce que vous perdez, c'est le contrôle que vous auriez si vous aviez utilisé .text() pour remplir les cellules du tableau afin d'éviter l'injection de code HTML.

6
Alnitak

Il est probablement plus rapide de créer le code HTML pour toute la ligne et de l'ajouter au tableau plutôt que d'ajouter chaque élément individuellement, un à la fois. Vous pouvez également étendre cela à la construction de tout le code HTML d'une chaîne, puis l'ajouter d'un coup, ce qui serait encore plus rapide. Dans un environnement MVC, je retournerais probablement une vue partielle (HTML) contenant la table car cela permettrait de séparer les préoccupations. J'éviterais toutefois de créer du code HTML sur le serveur (dans un contrôleur), car cela voudrait dire que vous auriez à changer de code à chaque fois que vous voudriez changer le mode d'affichage du tableau. Si vous utilisez PHP ou un autre langage de script, filtrez-le en fonction de votre environnement.

var html = '';
for (var key=0, size=data.length; key<size;key++) {

  html += '<tr><td>'
             + data[key][0]
             + '</td><td class="whatever1">'
             + data[key][1]
             + '</td><td class="whatever2">'
             + data[key][2]
             + '</td></tr>';
}

$('#dataTable').append(html);
0
tvanfosson