jquery add row row efficiency

Question

Je me demandais simplement quelle était la manière la plus efficace d'ajouter des lots (parfois environ 1000) de lignes de table via jQuery. Pour le moment, j'utilise jQuery ajax pour obtenir les données via JSON, puis je boucle sur l'objet json et construis html dans une variable, puis j'ajoute ce html dans la table. par exemple.

var arrayObject = $.parseJSON(data); 
var htmlToShow = ''; 
$.each(arrayObject, function(index, value){ 
    var htmlToShow += '<tr><td>' + value[0] + '</td><td>' + value[1] + '</td></tr>'; 
}); 
$('#tableResults').html(htmlToShow); 

Je me demandais juste quelle est la méthode la moins intensive de faire cela? Merci d'avance.

Answer 1

Je pense que l'envoi de données de ligne dans JSON est mieux que de faire du code HTML côté serveur. façon efficace de le faire sur le côté client est (opérations de tableau sont beaucoup plus rapides que la concaténation de chaîne):

var rows = $.parseJSON(data); 
var html = []; 
for (var i=0; i < rows.length; i++){ 
    html.push('<tr><td>' + rows[i].column + '</td></tr>'); 
}  
$('#tableResults').html(html.join('')); 

MISE À JOUR: Comme hradac a montré dans le commentaire ci-dessous, sur les navigateurs plus récents avec des moteurs plus rapides de JS (Chrome, FF) concatecation de chaîne est plus rapide que les jointures de tableau - proof

Answer 2

L'option la plus efficace serait de générer du code HTML sur le serveur, puis de le définir directement dans innerHTML.

Answer 3

Je pense que cela est à peu près aussi bon que vous allez obtenir:

construction

var arrayObject = $.parseJSON(data); 
var htmlToShow = $.map(arrayObject,function(o){ 
    return '<tr><td>' + o[0] + '</td><td>' + o[1] + '</td></tr>'; 
}).join(''); 
$('#tableResults').html(htmlToShow); 

incrémentalement toutes les chaînes intermédiaires avec + = est pas une bonne idée. Utiliser html() pour définir un gros blob de HTML (comme vous l'avez fait) est cependant une bonne idée.

Si vous devez ajouter des lignes supplémentaires à une table existante, notez qu'il est légal d'ajouter plusieurs éléments tbody à la même table. Pour ce faire, puis définir le html() du nouveau tbody en masse comme ci-dessus.

Modifier: Eh bien, je modifie ma réponse. Si vous voulez vraiment, vraiment, extraire les dernières performances de votre script, n'utilisez pas jQuery. N'utilisez pas map, n'utilisez pas each. Écrivez votre propre boucle pour mapper un tableau à un tableau de chaînes, rejoignez-les, puis définissez le innerHTML directement. Mais je pense que vous constaterez que les économies de performance réalisées en ce sens ne méritent pas le travail supplémentaire, les tests ou la fragilité éventuelle.

Answer 4

Vous pouvez essayer:

$(htmlToShow).appendTo('#tableResults'); 

Answer 5

Vous pouvez essayer d'afficher vos données en tant que données paginées . De cette façon, vous avez seulement besoin d'afficher une partie de toutes les données à la fois. C'est parce que peu de gens peuvent faire défiler pour afficher toutes les 10.000 lignes de données à la fois dans un site Web. Par exemple, vous pouvez avoir une fonction comme ceci: getPaginatedData (offset, max, condition). Par exemple, vous pouvez avoir une fonction comme ceci: getPaginatedData (offset, max, condition). Dans ce cas, vous obtenez les données qui correspondent à la condition, la ligne max qu'il devrait obtenir et le décalage de la ligne de données par laquelle vous commencez. Par exemple: en obtenant 10000 lignes de données à partir de la table CUSTOMER, vous pouvez le faire. Si le visualiseur est sur la page x, vous pouvez obtenir 100 clients sur 10000 clients (triés par nom), commencer à la position x, puis construire le code HTML du côté client. Je crois que cette approche (si elle correspond à vos désirs) est plus efficace que la construction de HTML côté serveur, ce qui augmente le trafic et la complexité côté serveur.

Answer 6

Je ne crois pas que ce soit une bonne idée d'enterrer du code HTML du côté serveur, ou même du code JavaScript. C'est une pratique généralement acceptée que vous devriez garder votre contenu, votre présentation et votre comportement séparés. Ceci est similaire à l'idée de MVC.

Il existe un plug-in pour JQuery appelé DataTables. C'est génial pour développer des tableaux HTML dynamiques sans avoir à coder à partir de zéro.

Cet exemple illustre un appel AJAX au serveur qui renvoie une réponse JSON représentant la table. Je crois que JSON est une meilleure option pour le transport de données, car il maintient votre contenu là où il appartient, côté client. Il rend également votre code côté serveur plus réutilisable, car d'autres applications côté client peuvent ensuite consommer ces données et les rendre dans n'importe quel format choisi par le client, qu'il s'agisse de HTML, XML, JSON ou de tout autre format.

http://www.datatables.net/examples/data_sources/server_side.html

Il est aussi un exemple d'ajouter une ligne à une table existante, sans recharger la page. Dans cet exemple, la ligne est transmise dans l'API en tant que tableau JSON. Cet exemple pourrait facilement être modifié pour prendre une série de tableaux, si vous retourniez plus d'une ligne de données dans votre réponse. Le principal avantage est qu'il existe des bibliothèques tierces pour convertir les objets côté serveur en JSON, et DataTables va bien sûr le convertir en HTML, éliminant ainsi le besoin de résoudre les bogues dans votre stratégie de génération HTML.

http://www.datatables.net/examples/api/add_row.html

En fin de compte, vos concepteurs web vous remercier pour garder le code HTML où ils peuvent facilement y accéder, sur le côté client, au lieu de enterré dans une fonction côté serveur entouré de code qu'ils peuvent ou peut ne pas être familier avec.