Je pensais que cela pourrait être un moyen rapide de supprimer le contenu d'une très grande table (3000 lignes):jquery - le plus rapide pour supprimer toutes les lignes d'une très grande table
$jq("tbody", myTable).remove();
Mais il prend environ cinq secondes à compléter dans Firefox. Est-ce que je fais quelque chose de stupide (à part essayer de charger 3000 lignes dans un navigateur)? Y a-t-il un moyen plus rapide de le faire?
$("#your-table-id").empty();
C'est aussi rapide que vous obtenez.
Deux questions que je peux voir ici:
Le vide() et supprimer() de jQuery font en fait un peu de travail. Voir JavaScript Function Call Profiling de John Resig pour pourquoi. L'autre chose est que pour de grandes quantités de données tabulaires, vous pouvez considérer une bibliothèque DataGrid comme l'excellent DataTables pour charger vos données à la volée depuis le serveur, en augmentant le nombre d'appels réseau, mais en diminuant la taille de ces appels. J'ai eu une table très compliquée avec 1500 lignes qui est devenue assez lente, en changeant à la nouvelle table basée sur l'AJAX fait que ces mêmes données semblent plutôt rapides.
Merci artlung. Faire quelque chose un peu comme ça, obtenir toutes les données à la fois à partir du serveur, mais dessiner des lignes de tableau en cas de besoin. – morgancodes
Sonne comme un bon appel. Je me demande si s'inquiéter du nombre de lignes dans une table dans un navigateur sera toujours un problème, ou si la mémoire de la plupart des ordinateurs augmente, ce sera moins un problème. – artlung
La mémoire n'est pas un problème avec la quantité de données que je charge. Le bottlneck est une manipulation DOM. – morgancodes
si vous voulez supprimer seulement rapide .. vous pouvez faire comme ci-dessous ..
$("#tableId tbody tr").each(function(){
this.parentNode.removeChild(this);
});
mais il peut y avoir quelques éléments de l'événement-binded dans le tableau,
dans ce cas ,
code ci-dessus est l'empêche pas de fuite de mémoire dans IE ... TT et pas rapide FF ...
désolé ....
Il est préférable d'éviter tout type de boucles, il suffit de retirer tous les éléments directement comme ceci:
$("#mytable > tbody").html("");
Vous pouvez essayer ...
var myTable= document.getElementById("myTable");
if(myTable== null)
return;
var oTBody = myTable.getElementsByTagName("TBODY")[0];
if(oTBody== null)
return;
try
{
oTBody.innerHTML = "";
}
catch(e)
{
for(var i=0, j=myTable.rows.length; i<j; i++)
myTable.deleteRow(0);
}
fonctionne ce pour moi:
1- classe add pour chaque ligne "removeRow"
2- dans le jQuery
$(".removeRow").remove();
Hum. Frustrant. Je pense que la suppression serait beaucoup plus rapide que l'insertion. Ca me donne envie de faire des choses vraiment moche comme cacher la table et en créer une nouvelle quand je veux la mettre à jour. – morgancodes
Ouais, eh bien ... HTML n'a pas été créé pour montrer 3k lignes dans une page :) Ne peux-tu pas penser à une solution paginée? Cela le rendrait beaucoup plus rapide. Bien sûr, cela exigerait plus de travail, mais ce sera une expérience utilisateur beaucoup plus riche. – Seb
Je l'ai construit paginée à l'origine, mais le client a insisté sur le défilement :(Les bonnes nouvelles sont 3k lignes est un cas marginal.Plus commun sera de quelques centaines – morgancodes