Construction d'une table triable à partir d'un tableau 2d

Soyez le premier à donner votre avis sur cette source.

Snippet vu 2 898 fois - Téléchargée 17 fois

Contenu du snippet

Mes premiers essais en Javascript :
La TABLE Html est construite à la volée quelque soit le nombre de lignes et de colonnes
avec en haut de chaque colonnes 2 liens permettant de trier les tableaux simultanément.

Seul le type string est géré.

Source / Exemple :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tests Popup</title>
<style type="text/css">

a {
text-decoration:none;
}

table {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; 
position : relative; 
top:15px; 
left:0px; 
width:550px;
border-style : solid; 
border-width : 1px;
margin: 5px;
margin.bottom : 20px;
}

</style>

<script language="javascript" type="text/javascript">

// Tableaux créés dans la Base :	
var vArr1 = ["Tomate","Banane","Orange","Avocat","Cerise","Abricot"] ;
var vArr2 = ["Rouge","Jaune","Orange","Vert","Rouge","Orange"] ;
var vArr3 = ["Légume","Fruit","Fruit","Légume","Fruit","Fruit"];
var vArr4 = ["Local","Import","Import","Import","Local","Local"];

var vArr_Master = [vArr1,vArr2,vArr3,vArr4];
var vArr_Titles = ["Article","Couleur","Nature","Provenance"];

function myMultiSort(ArrDouble,offset,numberOfArrays,order)
{
offset--;
numberOfArrays--;
vEnd=ArrDouble[offset].length;

do
{
vChanges=0;
for (i=1;i<vEnd;i++){
	if(order==1) //"asc"
		vBoo_Exchange = (ArrDouble[offset][i] < ArrDouble[offset][i-1]);
	else
		vBoo_Exchange = (ArrDouble[offset][i] > ArrDouble[offset][i-1]);
		
	if(vBoo_Exchange)
	{
	vChanges++;
	for (j=0;j<=numberOfArrays;j++)
		{
		temp=ArrDouble[j][i];
		ArrDouble[j][i]=ArrDouble[j][i-1];
		ArrDouble[j][i-1]=temp;
		}
	}
}
}
while(vChanges>0)
ShowTable(vArr_Master,vArr_Titles);	
}

	

function ShowTable(vArr_Master,vArr_Titles)
{

// Montage de la ligne de titre
vText="";
vNOfArrays=vArr_Titles.length;
for (i=0;i<vNOfArrays;i++){
vText=vText+text2TitleWithSortLinks("vArr_Master",vArr_Titles[i],(i+1),vNOfArrays);
}
vText=text2Line(vText);
// Montage des lignes de données
	for (i=0;i<vArr_Master[0].length;i++){
	vLigne="";
		for (j=0;j<vNOfArrays;j++){
			vLigne=vLigne+text2Cell(vArr_Master[j][i]);
		}
		vLigne=text2Line(vLigne);
		vText=vText+vLigne;
	}
vText=text2Table(vText);
document.getElementById("contenu").innerHTML=vText;
}

function text2TitleWithSortLinks(vArr,txt,offset,vNOfArrays)
{
txt="<th>"+txt+" <a href='javascript:myMultiSort("+vArr+","+offset+","+vNOfArrays+",1);'><</a>";
txt=txt+" <a href='javascript:myMultiSort("+vArr+","+offset+","+vNOfArrays+",0);'>></a></th>";
return txt;
}

function text2Cell(txt)	
{
txt="<td>"+txt+"</td>";
return txt;
}

function text2Line(txt)	
{
txt="<tr>"+txt+"</tr>";
return txt;
}

function text2Table(txt)	
{
txt="<table border=1>"+txt+"</table>";
return txt;
}

</SCRIPT>

</HEAD>
<BODY bgColor="#ffffff" onload ="ShowTable(vArr_Master,vArr_Titles)">
<div id="contenu">
</div>
<br>
<br>

</BODY>
</HTML>

Conclusion :


C'est peut-être obsolète.
Sinon aidez moi à le faire évoluer de vos remarques.
Ensuite :
J'imagine des pages avec recherche et tri :
Les tableaux javascript sont fournis au chargement par le serveur
avec un autre jeu de tableaux vides pour la sélection.
Une recherche permet de nourrir la sélection
et la table html triable est dessinée
(ce n'est pas le html qui est trié mais bien les arrays
avec redessinement de la TABLE html.

A voir également

Ajouter un commentaire

Commentaires

testabc
Messages postés
34
Date d'inscription
jeudi 17 juillet 2008
Statut
Membre
Dernière intervention
23 juillet 2014
-
Ca marche bravo !

Dans l'état c'est difficilement adaptable à des tables déjà existantes.
L'idéal serait de permettre un tri dynamique après affichage du tableau permettant ainsi de disposer quand même de celui-ci lorsque le js est désactivé (accessibilité oblige)...

bon pour te faciliter la tache voici un plugin fait avec la bibliothèque Jquery
http://tablesorter.com/docs/

C'est ce que tu as fait... mais en mieux ;)
cs_phm
Messages postés
49
Date d'inscription
jeudi 17 janvier 2002
Statut
Membre
Dernière intervention
23 avril 2009
-
:)
Merci pour ton avis.
Jquery, je n'en suis pas là.
je fais du javascript comme m. jourdain de la prose.
J'aime bien réinventer la roue pour comprendre, avant de passer à des outils plus performants.
faire de l'ajax avec juste un httprequest etc...
je n'aurais simplement peut-être pas dû poster.
J'espère que ça servira à un autre débutant !
A+
ym_trainz
Messages postés
2
Date d'inscription
samedi 11 juillet 2009
Statut
Membre
Dernière intervention
21 janvier 2014
> cs_phm
Messages postés
49
Date d'inscription
jeudi 17 janvier 2002
Statut
Membre
Dernière intervention
23 avril 2009
-
J'aime aussi "réinventer la roue" et je trouve ce code fonctionnel et pédagogique. ;-)
Merci

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.