Fermer

Visiteur non-identifié | Identifiez-vous | Devenir membre
Code perdu ? | Combien de visiteurs sur votre site ?

new!

HTML Table Filter Generator

Script posté par :

Koalyptus - (Sites : HTML Table Filter Generator - Koalyptus)
Vous aussi, postez vos scripts en cliquant ici.

Description

Ce petit script permet d'insérer automatiquement une grille de filtrage dans un tableau html classique. Le but est de donner la possibilité à l'utilisateur de filtrer les données en fonction des critères choisis.

Compatibilité :

	FireFox : Toutes versions
	Mozilla : 1 et +
	Netscape Navigator : 6 et +
	Internet Explorer : 5.5 et +

Ce script utilise le DHTML

Chiffres :

Date de création : 17/08/2006
Dernière modif : -
Visites de la page : 10134
Envois par mail : 131

Origine de ce script :

Ce script a été trouvé sur http://mguglielmi.free.fr/scripts/TableFilter/?l=fr

Exemple :

Dép	Ville	Nb électeurs	Situation
06	Antibes	47 800	Test Nedap en 2005
06	Cagnes	?	Achat envisagé
06	Cannes	46 400	Achat envisagé
06	Grasse	?	Achat souhaité, budget insuffisant
06	Mandelieu-la-Napoule	14 700	Equip. Nedap en 2005
06	Mougins	12 200	Equip Nedap 2005
06	Nice	197 600	Test Nedap en 2004, projets lointains
06	St Laurent du Var	18 900	Equip 2005
06	Vence	11 500	Equip 2005
06	Valbonne	6 700	Equip 2005
06	Villeneuve-Loubet	8 700	Equip. Nedap 2004
08	Sedan	10 900	Equip 2005
18	Bourges	45 000	Equip. Nedap en 2005
25	Montbéliard	15 500	Equip 2005
26	Bourg-de-Péage	6 700	Location Nedap 2004, abandon (coût)
29	Brest	82 500	Equip. Nedap en 2004
31	Toulouse	220 400	Expérim. Indra en 2004
31	Castanet-Tolosan	7 200	Equip 2005

Et ici, le même tableau avec la grille de filtrage généré automatiquement:

Dép	Ville	Nb électeurs	Situation
06	Antibes	47 800	Test Nedap en 2005
06	Cagnes	?	Achat envisagé
06	Cannes	46 400	Achat envisagé
06	Grasse	?	Achat souhaité, budget insuffisant
06	Mandelieu-la-Napoule	14 700	Equip. Nedap en 2005
06	Mougins	12 200	Equip Nedap 2005
06	Nice	197 600	Test Nedap en 2004, projets lointains
06	St Laurent du Var	18 900	Equip 2005
06	Vence	11 500	Equip 2005
06	Valbonne	6 700	Equip 2005
06	Villeneuve-Loubet	8 700	Equip. Nedap 2004
08	Sedan	10 900	Equip 2005
18	Bourges	45 000	Equip. Nedap en 2005
25	Montbéliard	15 500	Equip 2005
26	Bourg-de-Péage	6 700	Location Nedap 2004, abandon (coût)
29	Brest	82 500	Equip. Nedap en 2004
31	Toulouse	220 400	Expérim. Indra en 2004
31	Castanet-Tolosan	7 200	Equip 2005

- Page de démo:
mguglielmi.free.fr/scripts/TableFilter/?l=fr

Le code :

Entre <HEAD> et </HEAD> :

caption{ margin:10px 0 0 5px; padding:10px; text-align:left; }
th{ background-color:#003366; color:#FFFFFF; padding:2px; border:1px solid #ccc; }

/*====================================================
	- classes des filtres
	- éditer les classes ci-dessous pour changer le
	style des <input> et du bouton "go" <a>
=====================================================*/
a.btn{
	border:1px outset #ccc;
	margin:1px; padding:1px;
	text-decoration:none; color: #666;
	background-color:#CCCCCC;
}
.flt{ 
	background-color:#f4f4f4; border:1px inset #ccc; 
	margin:0; width:100%;
}
.flt_s{
	background-color:#f4f4f4; border:1px inset #ccc; 
	margin:0; width:90%;
}
</style>

var TblId, StartRow, SearchFlt;
TblId = new Array, StartRow = new Array;

function AddRow(id,n,f)
/*====================================================
	- ajoute un filtre (input ou select) pour chaque 
	colonne
	- ajoute le bouton dans la dernière colonne
=====================================================*/
{
	var t = document.getElementById(id);
	var fltrow = t.insertRow(0);
	var inpclass;

for(var i=0; i<n; i++)
	{
		var fltcell = fltrow.insertCell(i);
		i==n-1 ? inpclass = "flt_s" : inpclass = "flt";
		
		if(f==undefined || f["col_"+i]==undefined || f["col_"+i]=="none") 
		{
			var inp = document.createElement("input");		
			inp.setAttribute("id","flt"+i+"_"+id);
			if(f==undefined || f["col_"+i]==undefined) inp.setAttribute("type","text");
			else inp.setAttribute("type","hidden");
			//inp.setAttribute("class","flt"); //ne marche pas sur ie<=6		
			fltcell.appendChild(inp);
			document.getElementById("flt"+i+"_"+id).className = inpclass;
			document.getElementById("flt"+i+"_"+id).onkeypress = DetectKey;			
		}
		else if(f["col_"+i]=="select")
		{
			var slc = document.createElement("select");
			slc.setAttribute("id","flt"+i+"_"+id);
			fltcell.appendChild(slc);
			PopulateOptions(id,i,n);
			document.getElementById("flt"+i+"_"+id).className = inpclass;
			document.getElementById("flt"+i+"_"+id).onkeypress = DetectKey;
		}
		
		if(i==n-1) // ajout du bouton
		{
			var btn = document.createElement("a");
			
			btn.setAttribute("id","btn"+i+"_"+id);
			btn.setAttribute("href","javascript:Filter('"+id+"');");
			btn.setAttribute("class","go");
			fltcell.appendChild(btn);
			btn.appendChild(document.createTextNode("go"));
			
			document.getElementById("btn"+i+"_"+id).className = "btn";
		}//if		
		
	}// for i
}

function Filter(id)
/*====================================================
	- récupère les chaines recherchés dans le array 
	SearchFlt
	- récupère le contenu des td de chaque tr et 
	le compare à la chaine recherché dans la colonne
	courante
	- le tr est caché si toutes les chaines ne sont 
	pas trouvé
=====================================================*/
{	
	getFilters(id);
	var t = document.getElementById(id);
	var SearchArgs = new Array();
	var ncells = getCellsNb(id);
	
	for(i in SearchFlt) SearchArgs.push((document.getElementById(SearchFlt[i]).value).toLowerCase());
	
	var start_row = getStartRow(id);
	var row = t.getElementsByTagName("tr");
	
	for(var k=start_row; k<row.length; k++)
	{	
		/*** si la table a été déjà filtré certaines lignes ne sont pas visibles ***/
		if(row[k].style.display == "none") row[k].style.display = "";
		
		var cell = getChildElms(row[k]).childNodes;
		var nchilds = cell.length;

if(nchilds == ncells){// vérife que la ligne a le nombre exact de cellules
			var cell_value = new Array();
			var occurence = new Array();
			var isRowValid = true;
				
			for(var j=0; j<nchilds; j++)// cette boucle récupère le contenu de la cellule
			{
				var cell_data = getCellText(cell[j]).toLowerCase();
				cell_value.push(cell_data);
				
				if(SearchArgs[j]!="")
				{
					occurence[j] = cell_data.split(SearchArgs[j]).length;
				}
			}//for j
			
			for(var t=0; t<ncells; t++)
			{
				if(SearchArgs[t]!="" && occurence[t]<2) 
				{
					isRowValid = false;					
				}
			}//for t
			
		}//if				
		
		if(isRowValid==false) row[k].style.display = "none";
		else row[k].style.display = "";
		
	}// for k
}

function getCellsNb(id,nrow)
/*====================================================
	- renvoie le nombre de cellules d'une ligne
	- si nrow est passé en paramètre, renvoie le 
	nombre de cellules de la ligne specifiée
=====================================================*/
{
  	var t = document.getElementById(id);
	var tr;
	if(nrow == undefined) tr = t.getElementsByTagName("tr")[0];
	else  tr = t.getElementsByTagName("tr")[nrow];
	var n = getChildElms(tr);
	return n.childNodes.length;
}

function getFilters(id)
/*====================================================
	- les id des filtres (input) sont gardés dans le
	array SearchFlt
=====================================================*/
{
	SearchFlt = new Array;
	var t = document.getElementById(id);
	var tr = t.getElementsByTagName("tr")[0];
	var enfants = tr.childNodes;
	
	for(var i=0; i<enfants.length; i++) SearchFlt.push(enfants[i].firstChild.getAttribute("id"));
}

function getStartRow(id)
/*====================================================
	- renvoie la ligne de réference d'un tableau
=====================================================*/
{
	var r;
	for(j in TblId)
	{
		if(TblId[j] == id) r = StartRow[j];
	}
	return r;
}

function getCellText(n)
/*====================================================
	- renvoie le texte du noeud et de ses childs
	- au cas où on a des balises dans le td, on 
	récupère quand même leur contenu pour que la 
	recherche ne soit pas faussée
=====================================================*/
{
	var s = "";
	var enfants = n.childNodes;
	for(var i=0; i<enfants.length; i++)
	{
		var child = enfants[i];
		if(child.nodeType == 3) s+= child.data;
		else s+= getCellText(child);
	}
	return s;
}

</script>

Entre <BODY> et </BODY> :

<table cellpadding="1" cellspacing="0" width="100%" >
	<tr ><th scope='col' width="5%"><strong >Dép</strong></th><th scope='col' width="30%"><strong >Ville</strong></th>
	<th scope='col' width="20%"><strong >Nb électeurs</strong></th><th scope='col' width="45%"><strong >Situation</strong></th>
	</tr>
	<tr ><td>06</td><td>Antibes </td><td> 47 800</td><td>Test Nedap en 2005 </td></tr>
	<tr><td>06</td><td>Cagnes </td><td> ?</td><td> Achat envisagé </td></tr>
	<tr ><td>06</td><td>Cannes </td><td>46 400</td><td> Achat envisagé </td></tr>
	<tr><td>06</td><td>Grasse </td><td> ?</td><td> Achat souhaité, budget insuffisant </td></tr>
	<tr ><td>06</td><td>Mandelieu-la-Napoule</td><td>14 700</td><td>Equip. Nedap en 2005 </td></tr>
	<tr><td>06</td><td>Mougins</td><td>12 200</td><td> Equip Nedap 2005</td></tr>
	<tr ><td>06</td><td>Nice</td><td>197 600</td><td>Test Nedap en 2004, projets lointains </td></tr>
	<tr><td>06</td><td>St Laurent du Var</td><td>18 900</td><td> Equip 2005</td></tr>
	<tr ><td>06</td><td>Vence</td><td>11 500</td><td> Equip 2005</td></tr>
	<tr><td>06</td><td>Valbonne</td><td>6 700</td><td> Equip 2005</td></tr>
	<tr ><td>06</td><td>Villeneuve-Loubet</td><td>8 700</td><td>Equip. Nedap 2004</td></tr>
	<tr><td>08</td><td>Sedan</td><td>10 900</td><td> Equip 2005</td></tr>
	<tr ><td>18</td><td>Bourges</td><td> 45 000</td><td>Equip. Nedap en 2005 </td></tr>
	<tr><td>25</td><td>Montbéliard</td><td>15 500</td><td> Equip 2005</td></tr>
	<tr ><td>26</td><td>Bourg-de-Péage</td><td>6 700</td><td>Location Nedap 2004, <strong >abandon (coût)</strong></td></tr>
	<tr><td>29</td><td>Brest </td><td> 82 500 </td><td> Equip. Nedap en 2004 </td></tr>
	<tr ><td>31</td><td>Toulouse </td><td> 220 400 </td><td> Expérim. Indra en 2004</td></tr>
	<tr><td>31</td><td>Castanet-Tolosan</td><td>7 200</td><td> Equip 2005</td></tr>
	</table>
	
	<p>Et ici, le même tableau avec la grille de filtrage généré automatiquement: </p>

<table id="table1" cellpadding="1" cellspacing="0" width="100%" >
	<tr ><th scope='col' width="5%"><strong >Dép</strong></th><th scope='col' width="30%"><strong >Ville</strong></th>
	<th scope='col' width="20%"><strong >Nb électeurs</strong></th><th scope='col' width="45%"><strong >Situation</strong></th>
	</tr>
	<tr ><td>06</td><td>Antibes </td><td> 47 800</td><td>Test Nedap en 2005 </td></tr>
	<tr><td>06</td><td>Cagnes </td><td> ?</td><td> Achat envisagé </td></tr>
	<tr ><td>06</td><td>Cannes </td><td>46 400</td><td> Achat envisagé </td></tr>
	<tr><td>06</td><td>Grasse </td><td> ?</td><td> Achat souhaité, budget insuffisant </td></tr>
	<tr ><td>06</td><td>Mandelieu-la-Napoule</td><td>14 700</td><td>Equip. Nedap en 2005 </td></tr>
	<tr><td>06</td><td>Mougins</td><td>12 200</td><td> Equip Nedap 2005</td></tr>
	<tr ><td>06</td><td>Nice</td><td>197 600</td><td>Test Nedap en 2004, projets lointains </td></tr>
	<tr><td>06</td><td>St Laurent du Var</td><td>18 900</td><td> Equip 2005</td></tr>
	<tr ><td>06</td><td>Vence</td><td>11 500</td><td> Equip 2005</td></tr>
	<tr><td>06</td><td>Valbonne</td><td>6 700</td><td> Equip 2005</td></tr>
	<tr ><td>06</td><td>Villeneuve-Loubet</td><td>8 700</td><td>Equip. Nedap 2004</td></tr>
	<tr><td>08</td><td>Sedan</td><td>10 900</td><td> Equip 2005</td></tr>
	<tr ><td>18</td><td>Bourges</td><td> 45 000</td><td>Equip. Nedap en 2005 </td></tr>
	<tr><td>25</td><td>Montbéliard</td><td>15 500</td><td> Equip 2005</td></tr>
	<tr ><td>26</td><td>Bourg-de-Péage</td><td>6 700</td><td>Location Nedap 2004, <strong >abandon (coût)</strong></td></tr>
	<tr><td>29</td><td>Brest </td><td> 82 500 </td><td> Equip. Nedap en 2004 </td></tr>
	<tr ><td>31</td><td>Toulouse </td><td> 220 400 </td><td> Expérim. Indra en 2004</td></tr>
	<tr><td>31</td><td>Castanet-Tolosan</td><td>7 200</td><td> Equip 2005</td></tr>
	</table>
	
	<script language="javascript" type="text/javascript">
	//<![CDATA[
		var table1Filters = {
			col_0: "select"
		}
		setFilterGrid("table1",table1Filters);
	//]]>
	</script>
	<p>- Page de démo:<br>
	<a href="http://mguglielmi.free.fr/scripts/TableFilter/?l=fr">mguglielmi.free.fr/scripts/TableFilter/?l=fr</a></p>

Services email :

Je désire recevoir ce script par email
Je désire recevoir un email en cas de modification de ce script
Je désire m'abonner à la newsletter de l'éditeur JavaScript

Les annotations des visiteurs :

Pas d'annotation pour ce script.
>> Poster une annotation sur ce script

10 visiteurs
actuellement en ligne

PUBLICITE

ANNUAIRE WEBMAST.

Mutivea - Sonneries & logos
Plus de 6.000 sonneries - Stats ultra-détaillées - Paiement à la demande - Marque blanche.
http://mobile.multivea.com

Cat : Affiliation - publicité
Voir l'annuaire webmaster

LES SCRIPTS :

78 à éditer
68 à copier/coller
247 des membres
2580 sur le web
>> Tous les scripts

LES MEMBRES :

55232 membres
8516 comptes CountUs
1482 comptes myCircle

LES FORUMS :

14 forums
39229 topics
188849 messages
>> Les forums

SONDAGE

La mini-astuce "PHP / mySQL" du jour par @Rano
Lorsque vous voulez faire une recherche sur les fonctions PHP, allez simplement à l'url :
http://fr.php.net/fonction_que_vous_cherchez (par exemple http://fr.php.net/mail)
Proposer votre mini-astuce | Archives des mini-astuces

Pseudo :
Code :
	Se souvenir de moi