CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 28 15:03:31

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

TABLEAU GÉNÉRÉ ET TRIÉ PAR LE CLIENT

Information sur la source

Note :

10,00 / 10

Catégorie :Divers Classé sous :quicksort, table, tri, liste Niveau :Initié Date de création :18/07/2009 Date de mise à jour :20/07/2009 20:57:46 Vu / téléchargé :5 299 / 446

Auteur : Klephte

Ecrire un message privé

Site perso

Ce membre participe au partage de revenus publicitaires

Commentaire sur cette source (7)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

Le but ici est d'illustrer plusieurs techniques de développement javascript.
La première concerne une structure de stockage dont l'initialisation par un script ASP ou PHP est extrêmement simple.
La seconde est l'implémentation de deux méthodes de tri, le bubblesort et le quicksort, avec ci-dessous un tableau des performances obtenues avec ces deux algorithmes et la comparaison avec le Sort natif du javascript.

#lignes BubbleSort  QuickSort
100         40ms         8ms
500       1500ms        40ms
1000      5800ms        60ms
5000         ...       500ms

Le tout est une interface efficace affichant un tableau généré sur la base de la structure de données permettant le tri de son contenu, ainsi avec le tri natif, un tableau de 10 000 lignes est trié en moins d'une demi seconde !

Une demo en ligne est visible à l'adresse http://www.grandville.net/download/list.html

Source

<!--
list.html
Exemple de génération d'un tableau par un javascript
et trois fonctions de tri BubbleSort, QuickSort et tri natif
V2.0 20/07/2009 ajout du tri natif et correction du générateur rndString
V1.0 18/07/2009 version initiale
-->
<html>
<head>
</head>
<body>
<style type="text/css">
#DN td {font-weight:normal; color:#fff; font-size:15px;}
#DN td.sel {font-weight:bold; color:#fff;font-size:15px;}
#DN td.crt {font-weight:normal;font-size:12px;background:#888;}
#DN td.typ {font-weight:normal;font-size:12px;background:#ccc;}
#DN td.exp1 {background:red;color:#000;}
#DN td.exp2 {background:#FFCC33;color:#000;}
#DN tr { font-size:11px;font-family:verdana;font-weight:bold;color:#fff; background:#0033CC; padding:2px 0; text-indent:2px; margin-top:2px; border:1px solid #09d;}
</style>
<input type="text" value="" id="NB"><input type="button" value="Randomize" onclick="javascript:RandomizeCertList(document.getElementById('NB').value);Redraw();"> <br>
<select id='algo'><option>BubbleSort</option><option>QuickSort</option><option>Native</option></select>
<br>
<div id=message style="font-family:verdana;;font-size:20px"><br></div><br>
<div id=DN></div>
<script language="javascript">
// définition de la structure de stockage des éléments du tableau
function cert(s1, s2, s3, s4, s5){
this.issuer=s1
this.subject=s2
this.expire=s3
this.auth=s4
this.pvk=s5
return this
}
// fonction retournant au format HTML une ligne de tableau
// contenant l'élément donné en paramètre
function TR(a,cert){
// en fonction du type de certificat
// l'image change [CA+[pvk|!pvk]|CRT+[pvk|!pvk]]
if(cert.auth)
if(cert.pvk)
strIcone = "<IMG src=\"images/rootpvk.png\">"
else
strIcone = "<IMG src=\"images/root.png\">"
else
if(cert.pvk)
strIcone = "<IMG src=\"images/certpvk.png\">"
else
strIcone = "<IMG src=\"images/cert.png\">"
// en fonction de proximité de l'expiration
// la couleur change
if(cert.expire<1){
return '<TR><TD class=\"typ\">'+strIcone+'</TD><TD class=\"crt\">'+cert.issuer+'</TD><TD class=\"crt\">'+cert.subject+'</TD><TD class=\"crt exp1\">'+cert.expire+'</TD></TR>';
}else if(cert.expire<2){
return '<TR><TD class=\"typ\">'+strIcone+'</TD><TD class=\"crt\">'+cert.issuer+'</TD><TD class=\"crt\">'+cert.subject+'</TD><TD class=\"crt exp2\">'+cert.expire+'</TD></TR>';
}else{
return '<TR><TD class=\"typ\">'+strIcone+'</TD><TD class=\"crt\">'+cert.issuer+'</TD><TD class=\"crt\">'+cert.subject+'</TD><TD class=\"crt\">'+cert.expire+'</TD></TR>';
}
}
// génération aléatoire des différents champs de la structure
function rndExpire(){
return Math.floor(Math.random() * 5);
}
function rndIssuer(){
var myArray = new Array("VeriSign Class 3 Secure Server CA","GTE CyberTrust Global Root","VeriSign Class 3 Extended Validation SSL SGC CA","thawte Primary Root CA");
return myArray[Math.floor(Math.random() * 4)];
}
function rndTrue(){
return Math.floor(Math.random()*2);
}
function rndString(){
str="ABCDEFGHIJKLMNOPRSTUVWXYZ";
var sRnd = '';
for (var i=0; i < str.length; i++){
if(i==1){str+=' ';}
var randomPoz = Math.floor(Math.random() * str.length);
sRnd += str.substring(randomPoz,randomPoz+1);
}
return sRnd;
}
// ces fonctions permettent de retourner les valeurs
// à indexer aux routines de tri
function CompIssuer(a,b){var x = a.issuer.toUpperCase();var y = b.issuer.toUpperCase();return ComparaisonFunction(x,y);}
function GetIssuer(a){return a.issuer.toUpperCase();}
function CompSubject(a,b){var x = a.subject.toUpperCase();var y = b.subject.toUpperCase();return ComparaisonFunction(x,y);}
function GetSubject(a){return a.subject.toUpperCase();}
function CompExpiration(a,b){var x = a.expire;var y = b.expire;return ComparaisonFunction(x,y);}
function GetExpiration(a){return a.expire;}
function CompType(a,b){var x = '*'+a.auth+a.pvk;var y = '*'+b.auth+b.pvk;return ComparaisonFunction(x,y);} // l'étoile garantie que ce sera une chaine de caractères !
function GetType(a){return '*'+a.auth+a.pvk;} // l'étoile garantie que ce sera une chaine de caractères !
function GetComparaisonFunction(bSortOrder){
if(bSortOrder){
return function (e1,e2){ return e1 < e2 ? -1 : e1 == e2 ? 0 : 1; };
}else{
return function (e1,e2){ return e1 > e2 ? -1 : e1 == e2 ? 0 : 1; };
}
}
function SortCol1(){
// fonction déclenchée par le clic sur la colonne 1
if(CurrentCol==1){
// clic sur la même colonne -> inversion de l'ordre
bSortOrder=!bSortOrder;
}else{
// premier clic sur la même colonne -> on fixe un ordre par défaut
CurrentCol=1;bSortOrder=1;
};
switch(document.getElementById('algo').selectedIndex){
case 0:
Compute('BubbleSort(GetIssuer)');break;
case 1:
Compute('quickSort(GetIssuer,0,nbcount-1)');break;
case 2:
Compute('mycert.sort(CompIssuer)');break;
}
}
// pour les autres colonnes ... même principe ...
function SortCol2(){if(CurrentCol==2){bSortOrder=!bSortOrder}else{CurrentCol=2;bSortOrder=1};switch(document.getElementById('algo').selectedIndex){case 0:Compute('BubbleSort(GetSubject)');break;case 1:Compute('quickSort(GetSubject,0,nbcount-1)');break;case 2:Compute('mycert.sort(CompSubject)');break;};}
function SortCol3(){if(CurrentCol==3){bSortOrder=!bSortOrder}else{CurrentCol=3;bSortOrder=1};switch(document.getElementById('algo').selectedIndex){case 0:Compute('BubbleSort(GetExpiration)');break;case 1:Compute('quickSort(GetExpiration,0,nbcount-1)');break;case 2:Compute('mycert.sort(CompExpiration)');break;};}
function SortType(){if(CurrentCol==4){bSortOrder=!bSortOrder}else{CurrentCol=4;bSortOrder=1};switch(document.getElementById('algo').selectedIndex){case 0:Compute('BubbleSort(GetType)');break;case 1:Compute('quickSort(GetType,0,nbcount-1)');break;case 2:Compute('mycert.sort(CompType)');break;};}
function Compute(a) {
// mesure des temps d'exécutions
ComparaisonFunction = GetComparaisonFunction(bSortOrder);
document.body.style.cursor='wait';
Debut = new Date();
eval(a);
Sort = new Date();
Redraw();
Fin = new Date();
// affichage
document.getElementById('message').innerHTML=a+' Sort:'+(Sort-Debut)+'ms, Draw:'+(Fin-Sort)+'ms';
}
function Redraw(){
// affichage du tableau repeuplé
document.body.style.cursor='wait';
obj=document.getElementById('DN');
html="<table id=DN><tr><td onclick=\"SortType();\"></td><td "+((CurrentCol==1)?"class=\"sel\"":"")+" onclick=\"SortCol1();\">Issuer</td><td "+((CurrentCol==2)?"class=\"sel\"":"")+" onclick=\"SortCol2();\">Subject</td><td "+((CurrentCol==3)?"class=\"sel\"":"")+" onclick=\"SortCol3();\">Expire</td></tr>";
for(a=0;mycert[a];a++){
html+=TR(a,mycert[a]);
}
obj.innerHTML='</table>'+html;
document.body.style.cursor='default';
}
// tri quickSort
// le principe pour un tri croissant est de séparer les données en deux
// moitiés puis de s'assurer que tous les éléments
// de la moitié gauche sont plus petits que le pivot qui est lui
// même plus petit que tous les éléments de droite.
// puis récursivement pour chaque moitié on recommence jusqu'a ce que les moitiés
// soient réduites à un seul élement, à la fin les éléments sont tous triés
// du plus petit au plus grand.
// Cette méthode de tri est très semblable à un arbre binaire et peut être
// extraordinairement plus performante sil elle est multithreadée avec
// des langages comme le java ou le C.
//
function quickSort(a, left, right) {
index = partition(a,left, right);
if (left < index - 1)
quickSort(a,left, index - 1);
if (index < right)
quickSort(a,index, right);
}
function partition(arr, left, right){
i = left;
j = right;
pivot = arr(mycert[Math.floor((left + right) / 2)]);
while (i <= j) {
while(ComparaisonFunction(arr(mycert[i]),pivot)>0)
i++;
while(ComparaisonFunction(arr(mycert[j]),pivot)<0)
j--;
if (i <= j) {
var dummy = mycert[i];
mycert[i] = mycert[j];
mycert[j] = dummy;
i++;
j--;
}
};
return i;
}
// tri BubbleSort
// le plus trivial, on prend chaque élément qu'on compare
// à chaque élément suivant et on permutte en fonction de l'ordre choisi
function BubbleSort(a) {
for (var i=0; mycert[i]; i++){
for (var j=i+1; mycert[j]; j++){
if ((a(mycert[j]) < a(mycert[i]) && bSortOrder) || (a(mycert[j]) > a(mycert[i]) && !bSortOrder)) {
var dummy = mycert[i];
mycert[i] = mycert[j];
mycert[j] = dummy;
}
}
}
}
// un générateur de basard
function RandomizeCertList(iNB){
delete mycert;
mycert=new Array();
nbcount=0;
for(a=0;a<iNB;a++){
mycert[nbcount++]= new cert(rndIssuer(),rndString(),rndExpire(),rndTrue(),rndTrue());
}
}
nbcount=0;
mycert=new Array();
// si cette page était générée par un script, voici à quoi ressemblerait
// l'initialisation des données à afficher
//mycert[nbcount++]=new cert('AG Consulting Personal identification Authority','Arnaud Grandville',1,0,0);
//mycert[nbcount++]=new cert('AG Consulting WebServer Authority','www.grandville.net',5,0,0);
CurrentCol = 1;
bSortOrder = 1;
RandomizeCertList(10);
document.getElementById('NB').value=10;
Redraw();
</script>
</body>
</html>

<!--
list.html
Exemple de génération d'un tableau par un javascript 
et trois fonctions de tri BubbleSort, QuickSort et tri natif

V2.0  20/07/2009  ajout du tri natif et correction du générateur rndString
V1.0  18/07/2009  version initiale

-->
<html>
<head>
</head>
<body>

<style type="text/css">
#DN td     {font-weight:normal; color:#fff; font-size:15px;}
#DN td.sel {font-weight:bold; color:#fff;font-size:15px;}
#DN td.crt {font-weight:normal;font-size:12px;background:#888;}
#DN td.typ {font-weight:normal;font-size:12px;background:#ccc;}
#DN td.exp1 {background:red;color:#000;}
#DN td.exp2 {background:#FFCC33;color:#000;}
#DN  tr { font-size:11px;font-family:verdana;font-weight:bold;color:#fff; background:#0033CC; padding:2px 0; text-indent:2px; margin-top:2px; border:1px solid #09d;}
</style> 

<input type="text" value="" id="NB"><input type="button" value="Randomize" onclick="javascript:RandomizeCertList(document.getElementById('NB').value);Redraw();"> <br>
<select id='algo'><option>BubbleSort</option><option>QuickSort</option><option>Native</option></select>
<br>
<div id=message style="font-family:verdana;;font-size:20px"><br></div><br>
<div id=DN></div>


<script language="javascript">
// définition de la structure de stockage des éléments du tableau
function cert(s1, s2, s3, s4, s5){
	this.issuer=s1
	this.subject=s2
	this.expire=s3
	this.auth=s4
	this.pvk=s5
	return this
}

// fonction retournant au format HTML une ligne de tableau 
// contenant l'élément donné en paramètre
function TR(a,cert){
	// en fonction du type de certificat
	// l'image change [CA+[pvk|!pvk]|CRT+[pvk|!pvk]]
	if(cert.auth)
		if(cert.pvk)
			strIcone = "<IMG src=\"images/rootpvk.png\">"
		else
			strIcone = "<IMG src=\"images/root.png\">"
	else
		if(cert.pvk)
			strIcone = "<IMG src=\"images/certpvk.png\">"
		else
			strIcone = "<IMG src=\"images/cert.png\">"
	
	// en fonction de proximité de l'expiration
	// la couleur change
	if(cert.expire<1){
		return '<TR><TD class=\"typ\">'+strIcone+'</TD><TD class=\"crt\">'+cert.issuer+'</TD><TD class=\"crt\">'+cert.subject+'</TD><TD class=\"crt exp1\">'+cert.expire+'</TD></TR>';
	}else if(cert.expire<2){
		return '<TR><TD class=\"typ\">'+strIcone+'</TD><TD class=\"crt\">'+cert.issuer+'</TD><TD class=\"crt\">'+cert.subject+'</TD><TD class=\"crt exp2\">'+cert.expire+'</TD></TR>';
	}else{
		return '<TR><TD class=\"typ\">'+strIcone+'</TD><TD class=\"crt\">'+cert.issuer+'</TD><TD class=\"crt\">'+cert.subject+'</TD><TD class=\"crt\">'+cert.expire+'</TD></TR>';
	}
}

// génération aléatoire des différents champs de la structure
function rndExpire(){
	return  Math.floor(Math.random() * 5);
}

function rndIssuer(){
	var myArray = new Array("VeriSign Class 3 Secure Server CA","GTE CyberTrust Global Root","VeriSign Class 3 Extended Validation SSL SGC CA","thawte Primary Root CA");
	return myArray[Math.floor(Math.random() * 4)];

}
function rndTrue(){
	return Math.floor(Math.random()*2);
}

function rndString(){
	str="ABCDEFGHIJKLMNOPRSTUVWXYZ";
	var sRnd = '';
	for (var i=0; i < str.length; i++){
		if(i==1){str+='                     ';}
		var randomPoz = Math.floor(Math.random() * str.length);
		sRnd += str.substring(randomPoz,randomPoz+1);
	}
	return sRnd;
}

// ces fonctions permettent de retourner les valeurs
// à indexer aux routines de tri
function CompIssuer(a,b){var x = a.issuer.toUpperCase();var y = b.issuer.toUpperCase();return ComparaisonFunction(x,y);}
function GetIssuer(a){return a.issuer.toUpperCase();}
function CompSubject(a,b){var x = a.subject.toUpperCase();var y = b.subject.toUpperCase();return ComparaisonFunction(x,y);}
function GetSubject(a){return a.subject.toUpperCase();}
function CompExpiration(a,b){var x = a.expire;var y = b.expire;return ComparaisonFunction(x,y);}
function GetExpiration(a){return a.expire;}
function CompType(a,b){var x = '*'+a.auth+a.pvk;var y = '*'+b.auth+b.pvk;return ComparaisonFunction(x,y);} // l'étoile garantie que ce sera une chaine de caractères !
function GetType(a){return '*'+a.auth+a.pvk;} // l'étoile garantie que ce sera une chaine de caractères !

function GetComparaisonFunction(bSortOrder){
	if(bSortOrder){
		return function (e1,e2){ return e1 < e2 ? -1 : e1 == e2 ? 0 : 1; };		
	}else{
		return function (e1,e2){ return e1 > e2 ? -1 : e1 == e2 ? 0 : 1; };	
	}
}


function SortCol1(){
	// fonction déclenchée par le clic sur la colonne 1 
	if(CurrentCol==1){
		// clic sur la même colonne -> inversion de l'ordre
		bSortOrder=!bSortOrder;
	}else{
		// premier clic sur la même colonne -> on fixe un ordre par défaut
		CurrentCol=1;bSortOrder=1;
		
	};
	
	switch(document.getElementById('algo').selectedIndex){
		case 0:
			Compute('BubbleSort(GetIssuer)');break;
		case 1:
			Compute('quickSort(GetIssuer,0,nbcount-1)');break;
		case 2:
			Compute('mycert.sort(CompIssuer)');break;
	}
}


// pour les autres colonnes ... même principe ...	
function SortCol2(){if(CurrentCol==2){bSortOrder=!bSortOrder}else{CurrentCol=2;bSortOrder=1};switch(document.getElementById('algo').selectedIndex){case 0:Compute('BubbleSort(GetSubject)');break;case 1:Compute('quickSort(GetSubject,0,nbcount-1)');break;case 2:Compute('mycert.sort(CompSubject)');break;};}
function SortCol3(){if(CurrentCol==3){bSortOrder=!bSortOrder}else{CurrentCol=3;bSortOrder=1};switch(document.getElementById('algo').selectedIndex){case 0:Compute('BubbleSort(GetExpiration)');break;case 1:Compute('quickSort(GetExpiration,0,nbcount-1)');break;case 2:Compute('mycert.sort(CompExpiration)');break;};}
function SortType(){if(CurrentCol==4){bSortOrder=!bSortOrder}else{CurrentCol=4;bSortOrder=1};switch(document.getElementById('algo').selectedIndex){case 0:Compute('BubbleSort(GetType)');break;case 1:Compute('quickSort(GetType,0,nbcount-1)');break;case 2:Compute('mycert.sort(CompType)');break;};}

function Compute(a) {
	// mesure des temps d'exécutions 
	ComparaisonFunction = GetComparaisonFunction(bSortOrder);
	document.body.style.cursor='wait';
	
	Debut = new Date();
	eval(a);
	Sort = new Date(); 
	Redraw();
	Fin = new Date();
	// affichage
	document.getElementById('message').innerHTML=a+' Sort:'+(Sort-Debut)+'ms, Draw:'+(Fin-Sort)+'ms';	
}

function Redraw(){
	// affichage du tableau repeuplé
	document.body.style.cursor='wait';
	obj=document.getElementById('DN');
	html="<table id=DN><tr><td onclick=\"SortType();\"></td><td "+((CurrentCol==1)?"class=\"sel\"":"")+" onclick=\"SortCol1();\">Issuer</td><td "+((CurrentCol==2)?"class=\"sel\"":"")+" onclick=\"SortCol2();\">Subject</td><td "+((CurrentCol==3)?"class=\"sel\"":"")+" onclick=\"SortCol3();\">Expire</td></tr>";
	for(a=0;mycert[a];a++){
		html+=TR(a,mycert[a]);
	}
	obj.innerHTML='</table>'+html;
	document.body.style.cursor='default';
}


// tri quickSort
// le principe pour un tri croissant est de séparer les données en deux 
// moitiés puis de s'assurer que tous les éléments
// de la moitié gauche sont plus petits que le pivot qui est lui 
// même plus petit que tous les éléments de droite.
// puis récursivement pour chaque moitié on recommence jusqu'a ce que les moitiés 
// soient réduites à un seul élement, à la fin les éléments sont tous triés 
// du plus petit au plus grand.
// Cette méthode de tri est très semblable à un arbre binaire et peut être 
// extraordinairement plus performante sil elle est multithreadée avec 
// des langages comme le java ou le C.
//
function quickSort(a, left, right) {
      index = partition(a,left, right);
      if (left < index - 1)
            quickSort(a,left, index - 1);
      if (index < right)
            quickSort(a,index, right);
}

function partition(arr, left, right){
	i = left;
	j = right;
	pivot = arr(mycert[Math.floor((left + right) / 2)]);
	while (i <= j) {
		
		while(ComparaisonFunction(arr(mycert[i]),pivot)>0)
			i++;
		while(ComparaisonFunction(arr(mycert[j]),pivot)<0)
			j--;
		if (i <= j) {
			var dummy = mycert[i];
			mycert[i] = mycert[j];
			mycert[j] = dummy;
			i++;
			j--;
		}
	};
	return i;
}

 

// tri BubbleSort
// le plus trivial, on prend chaque élément qu'on compare 
// à chaque élément suivant et on permutte en fonction de l'ordre choisi
function BubbleSort(a) {
	for (var i=0; mycert[i]; i++){
        for (var j=i+1; mycert[j]; j++){
			if ((a(mycert[j]) < a(mycert[i]) && bSortOrder) || (a(mycert[j]) > a(mycert[i]) && !bSortOrder)) {
				var dummy = mycert[i];
				mycert[i] = mycert[j];
				mycert[j] = dummy;
			}
		}
	}
}

// un générateur de basard
function RandomizeCertList(iNB){
	delete mycert;
	mycert=new Array();
	nbcount=0;
	for(a=0;a<iNB;a++){
		mycert[nbcount++]= new cert(rndIssuer(),rndString(),rndExpire(),rndTrue(),rndTrue());
	}
}

nbcount=0;
mycert=new Array();
// si cette page était générée par un script, voici à quoi ressemblerait
// l'initialisation des données à afficher
//mycert[nbcount++]=new cert('AG Consulting Personal identification Authority','Arnaud Grandville',1,0,0);
//mycert[nbcount++]=new cert('AG Consulting WebServer  Authority','www.grandville.net',5,0,0);

CurrentCol = 1;
bSortOrder = 1;
RandomizeCertList(10);
document.getElementById('NB').value=10;
Redraw();

</script>
</body>
</html>

Conclusion

Avec une telle interface, il est possible de retourner aux clients des tableaux de grande taille et ainsi réduire la sollicitation des serveurs web et d'économiser de la bande passante toute en ayant une interface utilisateur très véloce.

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

images
- cert.png 2 960 octets
- certpvk.png 3 084 octets
- root.png 3 033 octets
- rootpvk.png 3 134 octets
list.1.0.html 8 166 octets
list.html 9 353 octets

Télécharger le zip

Historique

18 juillet 2009 21:17:35 :: j'avais pas relu
20 juillet 2009 20:47:29 :: Ajout de la méthode de tri natif du javascript, au vu des performances, je ne pense pas qu'il soit nécessaire d'en dire plus ....
20 juillet 2009 20:57:46 :: Mise à jour de l'aperçu

Sources du même auteur

LISTE À CHOIX MULTIPLES

ENVOI DE FORMULAIRE AVEC DE L'AJAX

Toutes les sources de Klephte

Sources de la même categorie

SLIDESHOW IMAGES ET TEXTES EN PUR JAVASCRIPT par ansuzpeorth

INPUT TEXT AUTOMATIQUE CREATION SUPPRESSION par lycanges

TABLE_SV : TABLEAU DYNAMIQUE, MONTRER/CACHER COLONNE SUR DEM... par synanceia

COLONNES ADAPTABLES EN HAUTEUR par dronoide

VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES par william voirol

Toutes les sources de la catégorie Divers

Sources en rapport avec celle ci

CONSTRUCTION D'UNE TABLE TRIABLE À PARTIR D'UN TABLEAU 2D par phm

BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai

TRI DE TABLEAU, ALGORITHME LES PLUS CONNUS IMPLÉMENTÉS (FUSI... par the_wwt

AFFICHAGE, ÉDITION GRAPHIQUE DE TABLEAUX par thebmxeur

TRI DE TABLEAUX HTML par coucou747

Commentaires et avis

Commentaire de the_wwt le 19/07/2009 12:39:30

Bonjour,

cela est un bon exercice algorithmique, cependant le tri coté client n'est jamais une bonne solution.

Au passage, j'avais écris une source du même ressort il y a quelques années en implémentant les algorithmes les plus connus :
http://www.javascriptfr.com/codes/TRI-TABLEAU-ALGORITHME-PLUS-CONNUS-IMPLEMENTES-FUSION-QUICK_43711.aspx

La conclusion est que la fonction tri du navigateur (mis à part IE6) est toujours la meilleure...

Les propriétés (taille, ordre initial...) de la collection à trier influent beaucoup sur l'algorithme à utiliser...

Cdlt,

Pierrick

Commentaire de vincseize le 20/07/2009 00:35:58

Wouep, mais qd meme super interressant

Commentaire de lakichemole le 20/07/2009 09:20:20 10/10

Très bonne source, interressante :)
sinon THE_WWT qu'entends tu par "La conclusion est que la fonction tri du navigateur (mis à part IE6) est toujours la meilleure..." c'est quoi la fonction de tri du navigateur??

Commentaire de LeFauve42 le 20/07/2009 10:12:55

THE_WWT: Que veux-tu dire par "le tri coté client n'est jamais une bonne solution" ?

Si on n'a pas des miliers de lignes, et qu'on veut permettre a l'utilisateur de changer le tri (en cliquant sur le titre des colonnes) ca me parait un solution bien meilleure que de redemander au serveur une nouvelle liste, non ?

Je suis aussi curieux de savoir ce que tu entends par "la fonction de tri du navigateur". Est-ce que tu parles de la methode sort() de la classe Array ?

Eric

Commentaire de the_wwt le 20/07/2009 12:03:43

Bonjour à tous,

je parle en effet de la fonction Array#sort(comparator) qui trie une collection et peut prendre une fonction de comparaison en paramètre.

@LeFauve42: Tout simplement parce que durant le tri le navigateur est bloqué. Je suis d'accord avec toi si ta collection comporte moins de 25 éléments le navigateur est bloqué moins d'une milliseconde. Cependant, si tu utilises la pagination du jeu de résultat le tri coté client n'est plus envisageable (tout simplement car il ne dispose pas de l'ensemble de la collection).

Cdlt,

Pierrick

Commentaire de Klephte le 20/07/2009 14:18:53

Bonjour et merci pour vos réactions sur ce script.
Pour répondre à THE_WWT, je dirais qu'en règle générale, il n'est pas résonnable de faire trier un résultat par le client mais que dans mon cas particulier, le coût de collecte des données (dans le produit final) justifie que le client fasse ce travail lui même. De plus, comme tu t'en doutes, il ne s'agit que d'une partie d'un ensemble plus complexe permettant l'édition et la modification hors ligne de ces données (sans solliciter le serveur), seul le post final provoquant l'enregistrement.
Cela dit, j'ai regardé plus en détail le code que tu as posté et je te félicite pour la beauté du style, j'ai surtout aimé la fonction cf (comparaison fonction ??) qui éviterait dans mon cas les conditions d'ordres sur les tris. Je vais donc intégrer cette astuce et proposer une nouvelle version en ajoutant le sort natif pour avoir un comparatif entre un tri pourri (bubblesort), un bien (quicksort) et un excellent (sort natif) qui permet de trier dans un temp inférieur à la seconde un tableau de plusieurs milliers de lignes ...

Commentaire de lakichemole le 20/07/2009 14:28:48

Quand on a toutes les données et qu'on veux trier avec les pc d'aujourd hui je ne voit pas pourquoi faire un appel serveur,c'est d'ailleur un peu la mode aujourd hui un retour vers des clients semi-lourd (silverlight, flash,javascript avancé..) ça économise de la bande passante et du CPU serveur...non?

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Problème de tri dans une liste [ par rob29 ] Bonjour, j'ai un petit problème. j'ai une liste dans laquelle figurent des clients. je voudrais pouvoir trier les clients selon des catégori liste deroulante liée venant d'une table mysql [ par coxi19 ] bonjour,voila je ne connait pas le javascript et pourtant c le seul moyen de m'en sortir (apparament) alors si vous pouviez m'aidéevoilà j'ai une tabl Liste déroulante dymanique [ par noritaka19 ] Salut a tous,Je cherche a mettre a jour des listes déroulantes dans un formulaire, mais sans rafraichir la page. Quelqu'un pourrait-il m'aider.je Tri d'une liste DIV [ par pipoulito ] Bonjour, Je cherche à trier en ajax une liste composée de div contenant elles même des attributs titre, date... Ajax fait ça très bien avec des table Tri d'une table en fonction du click sur une colonne [ par manutu ] salut a tousj ai un problème. J'ai une table avec plusieurs colonnes. Je dois trier la table par défaut sur la premiere et ensuite sur la colonne sur Liste déroulante + Requete SQL [ par mitchbuck ] Bonjour à tous !J'ai regardé sur le forum beaucoup de script à propos des listes déroulantes mais, ou ce sont mes yeux qui ne sont Tri par ordre alphabétique [ par El_CaNaRdO ] Bonjour, Mon frère m'a aidé dernièrement à développer un petit JS pour faire des miracles. En résumé, j'ai un site qui recense des adresses. J'ai as probleme bd liste [ par peter2010 ] Bonjour, j'ai une base de données contenant de l'information sur l'inventaire de véhicules d'un garage. Je veux pouvoir afficher les numéros de série Formulaire et frame [ par abcxtreme ] Bonjour à tous, J'ai le sousci suivant : J'ai un index.php qui lance deux fichiers .php 1 - contient sous forme de liste le contenu succint d'u Supprimer le retrait d'une liste HTML [ par edelendil ] Voila, dans le cadre d'un menu expensif j'utilise une liste de type <UL><LI>....  pour faire mes rubriques/ sous rubriques. Hors il

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

MULTI SLIDER UNE SEUL PAGE par karouani

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Recheche Web Master pour MAJ de plateformes Musical
Budget : 500€
Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP