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.
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.