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

5/5 (3 avis)

Snippet vu 3 459 fois - Téléchargée 19 fois

Commenter

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
ym_trainz Messages postés 2 Date d'inscription samedi 11 juillet 2009 Statut Membre Dernière intervention 21 janvier 2014
21 janv. 2014 à 21:02
J'aime aussi "réinventer la roue" et je trouve ce code fonctionnel et pédagogique. ;-)
Merci
cs_phm Messages postés 49 Date d'inscription jeudi 17 janvier 2002 Statut Membre Dernière intervention 23 avril 2009
3 mars 2012 à 10:55
:)
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+
testabc Messages postés 33 Date d'inscription jeudi 17 juillet 2008 Statut Membre Dernière intervention 23 juillet 2014
27 févr. 2012 à 15:03
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 ;)
S'inscrire maintenant

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.

Du même auteur (cs_phm)