1 pièce(s) jointe(s)
[JS + AJAX] Gestion de groupe avec un nombre important d'utilisateurs
Bonjour à tous,
Pour vous expliquer le contexte, voici une capture d'écran du rendu.
On a donc la liste des groupes déjà créé chargé en AJAX avec la liste des utilisateurs vide dans un premier temps.
Lorsque l'administrateur ouvre un groupe, ça charge la liste des utilisateurs avec leur checkbox cochés si ils font partie du groupe.
Pièce jointe 200663
Je me retrouve devant un cas d'optimisation de temps de chargement au vue du nombre d'utilisateurs possible dans chaque groupe.
Jusqu'à présent pour ce genre d'utilisation j'utilisais de l'AJAX basique, j'appelle une fonction PHP avec l'id du groupe qui génère le tableau HTML des utilisateurs, qui est récupéré en JS et mis dans le conteneur du groupe correspondant par un simple innerHTML.
Mais voilà, lorsque le retour contient beaucoup d'utilisateurs, ça devient long, environ 6 à 7 secondes pour charger les utilisateurs d'un groupe (dans cet exemple 3379).
J'ai essayé de charger qu'une seule fois le tableau HTML des utilisateurs dans une DIV masquée, puis de cloner ce tableau dans le conteneur du groupe lors de son ouverture.
Ensuite je fais un petit appel AJAX qui récupère les id des utilisateurs appartenant au groupe et ça sélectionne les checkbox correspondantes à l'aide de leur valeur (correspondant à l'id).
Le clonage du tableau et l'appel AJAX se fait rapidement (environ 2s), pas de soucis si il y a peu de case cochés mais si tout est coché par exemple là ça remet environ 6-7s donc retour à la case départ !
Voici la fonction qui clone le tableau et sélectionne les checkbox :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
function cloneUtilisateurs(id) { // id du groupe
var newslettersUsersListing = document.getElementById('newslettersUsersListing'); // la div masquée contenant la liste des utilisateurs
var cible = document.getElementById('newslettersgroups_dest'+id); // le conteneur du groupe
InnerCMSLoading("newslettersgroupsDestList"+id, 'visible', 'fff');
removeAllChild(cible);
var table = firstChildDiv(newslettersUsersListing); // récup du tableau HTML
var new_table = table.cloneNode(true); // clonage
cible.appendChild(new_table); // placement
action = "get_users";
get_Xhr();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
retour = xhr.responseText;
var tab_id = new Array();
if(retour != '0') tab_id = retour.split('-+-'); // récup des id des utilisateurs
var all_checkbox = cible.getElementsByTagName('input'); // récup des input checkbox
for(var i = 0; i < all_checkbox.length; i++) { // parcours les input
var checkbox = all_checkbox[i];
if(checkbox.name = "newslettersgroups_inscrits[]") { // si c'est le bon nom
if(in_array(checkbox.value, tab_id)) { // si la valeur de l'input est dans le tableau des id d'utilisateur
checkbox.checked = true;
} else checkbox.checked = false;
checkbox.id = "newslettersgroups_inscrits"+id+"_"+i;
var tr = checkbox.parentNode.parentNode; // la ligne TR
var all_label = tr.getElementsByTagName('label'); // récup tous les label de la ligne
for(var j = 0; j < all_label.length; j++) {
all_label[j].htmlFor = "newslettersgroups_inscrits"+id+"_"+i; // changement du for pour qu'ils soient cliquable
}
}
}
}
}
xhr.open("POST","ajax_groups.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded Charset=iso-8859-1');
xhr.send("action="+action+"&idgroup="+id);
} |
Voila, je ne vois pas comment gagner du temps sur cette procédure.
Je suis ouvert à toute autre méthode ou critique des miennes, et n'hésitez pas à me dire si il n'y pas de solution miracle ;)
Merci d'avance.
