Discussion :

[Tententai]

Salut à tous,

J'ai une fonction assez simple, qui fait 3 choses séquentiellement :
1. appeler un code serveur avec ajax(), qui renvoie un tableau HTML (<table>)
2. insérer le tableau HTML reçu dans un elément du document
3. appliquer une fonction au tableau (un plug-in jquery, tablesorter : http://tablesorter.com/docs/ , qui va rendre le tableau triable en cliquant sur les entêtes). Cette fonction va changer le tableau (insertion de styles et d'events).

Voici un pseudo code :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
$.ajax({
	   type: "GET",				   
	   url: myURL,
	   dataType: "html",				   
	   success: function(data){		 
		 $("#myDiv").html(data);
		 $("table").tablesorter();		 
	   }
	 });

Ca fonctionne bien, cependant quand le tableau est grand, la fonction tablesorter() est relativement lente.

Ce que je voudrais, c'est d'abord afficher le tableau immédiatement, sans tablesorter, puis appliquer tablesorter. Le but est de rendre l'appli plus agréable, tout simplement.

Le problème est que javascript ne va changer l'affichage qu'après que la fonction tablesorter soit appliquée. En mettant un alert('hello') entre

Code :

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

$("#myDiv").html(data);

et

Code :

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

$("table").tablesorter();

ça le fait bien en deux fois, mais bien sûr ce n'est pas intéressant comme solution. Est-ce que quelqu'un saurait comment faire ça en deux étapes de façon transparente pour l'utilisateur ?

[Bovino]

Ce que je voudrais, c'est d'abord afficher le tableau immédiatement, sans tablesorter, puis appliquer tablesorter.

Ben c'est ce que tu fais actuellement si j'en crois ton code

[Tententai]

Oui, dans le code c'est séquentiel, mais à l'affichage tout se fait en une fois.

Par exemple, si afficher la table prend 1 seconde et appliquer la fonction de tri prend 3 secondes, la fonction va afficher la table directment avec les boutons de tri, après 4 secondes. Ce que je voudrais c'est qu'il affiche d'abord la table brute après 1 seconde, puis la table avec les boutons de tri 3 secondes plus tard.

Je ne sais pas trop pourquoi - j'imagine que Javascript anticipe que la fonction de tri va elle aussi toucher à la table, et affiche tout d'un coup.

[danielhagnoul]

Bonsoir

Vous pouvez utiliser setTimeout pour différer l'application du plug-in Tablesorter, exemple pour 4s :

Code :

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

1
2
3
setTimeout(function(){
	$("table").tablesorter();
}, 4000);

[Arnaud F.]

Bonjour

une autre manière de faire serait de voir s'il n'est pas possible d'optimiser votre méthode de tri de la table.

Peut-on avoir le code de la fonction tableSorter?

[Tententai]

Merci à vous deux. Le timer est une solution oui. On pourrait même faire 2 timers, un après 2 secondes, et un autre après 4 secondes qui lancerait le tri seulement si ça n'a pas encore été fait.

Pour le code du plug-in tablesorter, ce n'est pas moi qui l'ait fait, il se trouve ici : http://tablesorter.com/docs/ (c'est open source).
J'aime bien ce plug-in, il est très simple à utiliser et assez léger. Mais il est lent sur les grandes tables (plusieurs centaines de lignes).