Discussion :

[Lexarino]

Bonjour à tous,

J'ai trouvé un tuto pour afficher une animation de chargement (loading spinner) lors d'une requête ajax en JQuery.
Ce que je voudrais maintenant c'est pouvoir en afficher un également sur d'autres actions JQuery et notamment l'une d'elle qui prend beaucoup de temps à s'exécuter.
Lors d'un click : on va checker toutes les lignes d'un tableau pour cocher leur checkbox et ensuite pouvoir leur appliquer au choix des modifications via une requête ajax qui récupère tous les "id" des lignes au checkbox coché.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
	$('li#tout_select').click(function() {
		$("tbody input").each(function() {
			$("tbody input").prop('checked', true).attr('checked', 'checked');
			$("td.selection i").removeClass("fa-circle").addClass("fa-dot-circle");
		});
		// on compte le nombre d'éléments sélectionnés et on l'affiche :
		var numberChecked = $("td.selection").children("[type='checkbox']:checked").length;
		$("#selection p").text(numberChecked);
	});

Ce petit bout de code s'applique à parfois plusieurs milliers de lignes d'un tableau et l'utilisateur se demande ce qu'il se passe tout ce temps où rien ne s'affiche à l'écran.
Est-ce qu'il faut ajouter des "pauses" tous les x éléments modifiés et alimenter une barre de progression (avez-vous un tuto dans le genre à m'indiquer ?) ?
Dois-je complètement changer d'approche et limiter mon tableau en le scindant en plusieurs pages (sql limit) ?

Merci pour votre retour

[Toufik83]

Bonjour,

Dois-je complètement changer d'approche et limiter mon tableau en le scindant en plusieurs pages (sql limit) ?

Je pense que oui, tu dois passer par une pagination pour n'afficher que 10 lignes par page par exemple, parce que si le nombre de lignes est elevé, le chargement de la page html prendra beaucoup de temps à s'afficher.

Pour l'icone de chargement (spinner), tu peux ajouter une condition dans la boucle $.each afin de vérifier si c'est la dérnière ligne ou pas (avec :last), si oui tu supprimes l'icone de chargement sinon ne rien faire.

[darkstar123456]

Bonjour,

Effectivement, habituellement on préfère faire une pagination.
C'est plus fluide pour l'utilisateur et ce dès le chargement car si on imagine que les données viennent d'une DB et qu'elles sont infinies le chargement pour être extrêmement long.

Evitez également d'utiliser attr(), ca réécrit tout le dom et c'est extrêmement lourd.
A l'inverse, si vous utilisez uniquement prop() vous aurez quelque chose de beaucoup plus rapide.

Je vous ai fait un test avec un tableau de 1000 lignes (et donc autant de checkbox), en haut de page vous pouvez choisir de cocher les cases uniquement avec prop() ou alors avec prop() et attr().
Voici l'exemple: https://codepen.io/DarkStar123456/pen/NWgvmXK

Résultats :
Avec prop() : 270ms
Avec prop() et attr() : ~14 secondes chez moi

[Lexarino]

Merci pour ces réponses hyper claires et rapides.
Effectivement @darkstar123456 c'est bien plus rapide avec juste .prop(). Je n'arrive pas à retrouver la raison qui m'avait fait ajouter attr().
Bien vu @Toufik83 pour le spinner qui se coupe avec la dernière itération de la boucle each du coup en attendant de scinder le tableau voilà ce que j'obtiens :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
	$('li#tout_select').click(function() {
		var total_checkbox = $("tbody input").length;
		$("tbody input").each(function(index) {
			$body.addClass("loading"); // on met le loading
			$("tbody input").prop('checked', true);
			$("td.selection i").removeClass("fa-circle").addClass("fa-dot-circle");
			if (index === total_checkbox - 1) { $body.removeClass("loading"); }
		});
		// on affiche le nombre d'éléments sélectionnés
		$("#selection p").text(total_checkbox);
	});

Un énorme merci à vous les gars !

[Lexarino]

Etrange...

Mon animation ne se joue pas...
Si je supprime la boucle each pas de souci. Dès que je la remets dans le code, l'animation ne se lance pas.
Comme si JQuery s'élançait bille en tête sur la boucle et ne "prenait pas le temps" d'activer l'animation.
J'ai sorti l'animation de la boucle et ajouté même un delay() mais même chose :/

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
	// tout selectionner :
	$('li#tout_select').click(function() {
		$("body").addClass("loading").delay(100); // on met le loading
		var total = $("tbody input").length;
		$("tbody input").each(function(index) {
			$("tbody input").prop('checked', true);
			$("td.selection i").removeClass("fa-circle").addClass("fa-dot-circle");
			if (index === total - 1) { $("body").removeClass("loading"); }
		});
		// on compte le nombre d'éléments sélectionnés
		$("#selection p").text(total);
	});

[Toufik83]

Bonjour,

Avez-vous essayer un délais inférieur à 100 ms ?

[darkstar123456]

Bonjour,

J'ai mis à jour mon code ici : https://codepen.io/DarkStar123456/pen/LYLzaBG
En mettant le code dans un setTimeout(), ça permet de laisser le temps au javascript d'ajouter la classe à l'élément du loader.

Ici un autre exemple avec l'utilisation de Promise() mais toujours basé sur le même principe de laisser du temps à la classe de s'ajouter : https://codepen.io/DarkStar123456/pen/OJgxqQx