Fonction JavaScript qui fait un filtre

Version imprimable

10/04/2007, 11h03
soumou

Fonction JavaScript qui fait un filtre

Bonjour tout le monde, :P

J'ai une fonction mysql qui retourne un ensemble de lignes d'une table d'une base de donn�es, cette table contien une colonne "nom".

Je dois r�cuperer l'ensemble des lignes de cette table dans un tableau (en php : d�j� fait), et afficher le r�sultats de ma requete.
L'affichage des r�sultats je dois le filtrer (� l'aide d'une fonction javascript) selon la premi�re lettre de la colonne "nom" de ma table, donc je dois avoir une liste de lettres d'alphabet et lorsque je clique sur une lettre �a doit afficher les noms qui commencent avec cette lettre.

Est ce quelqu'un pourrait m'aider (j'ai besoin de la fonction javascript).

Merci d'avance. :)
10/04/2007, 11h06
Bis�n�rs

Heu, fais un mixe de display:block/none, et substring().
10/04/2007, 11h10
soumou

Bis�n�rs a �crit :

Citation:

Heu, fais un mixe de display:block/none, et substring().

Pourrais tu d�tailler un peu comment puis je le faire, je ne suis pas assez dou� en javascript :D
10/04/2007, 11h14
soumou

Je dois avoir en quelque sorte un truc comme �a :
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

et quand je clique sur la lettre B par exemple �a me donne une liste de nom qui commencent avec la lettre B:

Ballack
Bellick
Bianca
...etc
10/04/2007, 11h17
Bis�n�rs

Pourquoi tu ne fais pas �a en PHP ? Tu construis ta requ�te SQL en fonction de la lettre cliqu�e et pass�e en param�tre.

Tu limiteras ainsi la charge serveur en s�lectionnant tous les enregistrements de ta table.
10/04/2007, 11h25
soumou

Bis�n�rs a �crit :

Citation:

Pourquoi tu ne fais pas �a en PHP ? Tu construis ta requ�te SQL en fonction de la lettre cliqu�e et pass�e en param�tre.

Tu limiteras ainsi la charge serveur en s�lectionnant tous les enregistrements de ta table.

j'aimerais bien le faire en PHP, mais je dois le faire en javascript (impos�).
Si tu peux me d�tailler un peu li'd�e que tu as �voqu� un peu en dessus.

Merci d'avance.
10/04/2007, 11h33
Bis�n�rs
Ben je ne connais pas la structure de ton code, donc si c'est possible, tu peux faire comme �a :
Code:

1 2 3 4 5 6 7 8 9 10 11 <div id="lettrea"> Alphonse Arthur ... </div> <div id="lettreb"> Bernard Bianca ... </div> ...
Ensuite, si tu cliques sur A, tu n'affiches que le div dont l'id est lettrea.

Pour moi �a serait la solution la plus simple.
10/04/2007, 11h41
soumou

OK, Merci pour l'aide :P
10/04/2007, 11h48
SpaceFrog

oui ou encore avec des ancres et les divs en height 100% ...

Extrait d'un truc que j'avais d�j� fait:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<script>
window.onload = initStuff;
function initStuff() {
  var table = document.getElementById('table'),
      ul = document.getElementById('letters'),
      lis = ul.getElementsByTagName('li');
  for (var i = 0; i < lis.length; ++i)
    lis[i].firstChild.onclick = function() {
      return filterRows(table, 1, 0, this.firstChild.nodeValue);
    }
}
// tableElem : HTMLElement
// rowIndex  : index du row pour commencer le filtrage (0 indexed)
// tableElem : index du col à prendre en compte (0 indexed)
// tableElem : lettre pour la comparaison
function filterRows(tableElem, rowIndex, colIndex, letter) {
  for (var i = rowIndex, val; i < tableElem.rows.length; ++i) {
    val = tableElem.rows[i].cells[colIndex].firstChild.nodeValue;
    if (val.substr(0,1).toLowerCase() != letter.toLowerCase())
      tableElem.rows[i].style.display = 'none';
    else
      tableElem.rows[i].style.display = '';
  }  
  return false;
}
</script>
 
<ul id="letters">
  <li><a href="">A</a></li>
  <li><a href="">B</a></li>
  <li><a href="">C</a></li>
</ul>
 
<table id="table">
  <tr><th>Col0</th><th>Col1</th></tr>
  <tr><td>aa</td><td>1</td></tr>
  <tr><td>bb</td><td>2</td></tr>
  <tr><td>aa</td><td>3</td></tr>
  <tr><td>aa</td><td>4</td></tr>
  <tr><td>cc</td><td>5</td></tr>
</table>