Filtrer les résultats d'un tableau avec FilteringSelect

[VinceCBA]

Bonjour à tous,
J'ai actuellement un tableau (HTML) contenant une liste de clients (qui peut donc être assez grand ), et je désirerais placer un "filtre" juste au dessus de ce tableau pour n'afficher que les résultats souhaités.

Je m'explique :
Admettons que j'ai un tableau contenant la liste de clients suivante :
- ALFRED
- BERNARD
- MICHEL
- MICKAEL
j'ai donc un tableau avec 4 lignes.
J'aimerais que dès que je commence à taper la lettre "M" par exemple, je n'ai plus qu'un tableau à 2 lignes contenant "MICHEL" et "MICKAEL".

Voici mon code actuel :
Mon FilteringSelect :

Code :

1
2
3
4
5
6
<s:select
            list="clientsList"
            listValue="%{nom + ' '+prenom}"
            data-dojo-type="dijit.form.FilteringSelect"
            data-dojo-props="fetchProperties:{sort:[{attribute: 'nom', ascending: true}]}"
            />

Mon tableau contenant ma liste :

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
<table class="tableList">
            <thead>
                <tr>
                    <th class="tableId">ID</th>
                    <th>Nom</th>
                    <th>Prénom</th>
                    <th class="tableActions" colspan="2"> 
                        <s:a href="add">
                            <img class="edit" src="<%=Constantes.REP_IMG%>/btn_td_add.png" title="Créer un nouveau patient" />
                        </s:a>
                    </th>
                </tr>
            </thead>
            <s:iterator value="clientsList">
                <tr>
                    <td class="tdValId"><s:property value="id" /></td>
                    <td><s:property value="nom" /></td>
                    <td><s:property value="prenom" /></td>
                    <td class="tdActions">
                        <s:a href="edit?id=%{id}">
                            <img class="edit" src="<%=Constantes.REP_IMG%>/btn_td_update.png" title="Modifier" />
                        </s:a>
                    </td>
                    <td class="tdActions">
                        <s:a href="client_delete?id=%{id}" onclick="return(confirm('Etes-vous sûr de vouloir supprimer cette entrée?'))">
                            <img class="del" src="<%=Constantes.REP_IMG%>/btn_td_delete.png" title="Supprimer" />
                        </s:a>
                    </td>
                </tr>
            </s:iterator>
        </table>

Je n'ai pas vraiment d'idées sur comment effectuer ceci, toutes aide et idées seront donc les bienvenues

Merci d'avance

[Le Roux B.]

Je pense qu'il faut chercher du côté du dataStore.
Il faut y mettre les données.
On peut effectuer un filtre et "connecter" le dataStore avec un grid.

[VinceCBA]

Bonjour,

Envoyé par Le Roux B.

On peut effectuer un filtre et "connecter" le dataStore avec un grid.

Pour les grid justement, on est obligé de passer par un fichier (JSON ou autre) ?

[Le Roux B.]

Je ne sais pas ce que tu entends par "fichier".
On peut faire un peu comme on veut.
Cependant, ma petite expérience d'utilisation avec Dojo montre qu'il est préférable d'utiliser dataStore. Au début, j'ai trouvé cela contraignant mais à l'usage, on s'y retrouve plus facilement lorsqu'il y a des modifications à apporter sur le structure du grid par exemple.
DataStore est une interface (au sens Java) générale de manipulation de données dont le filtrage.
Un certain nombre d'implémentation existe :
http://dojotoolkit.org/reference-gui...tml#dojox-data

Peut être, celle ci t'intéressera plus particulièrement
http://dojotoolkit.org/reference-gui...htmltablestore

[VinceCBA]

Au sens de fichier, j'entends un fichier physique (.json, .cvs etc...) comme j'ai vu sur tous les exemples jusqu'a présent.

Ce qui m'intéresserait , c'est de remplir mon tableau directement à partir d'une liste Java (Arraylist ou autre ...), en gardant la logique de Struts 2
Merci pour tes liens, je vais regarder ca

[Daniel_Gibot]

Bonjour,

Il existe un moyen de filtrer rapidement dans un dataGrid. Voici la fonction que j'utilise :

Code :

1
2
3
4
5
function filtrer(){
		tableau = dijit.byId('monDataGrid');
		valeur = dijit.byId('monChampsFiltre').get('value');
		tableau.setQuery({colonneDuDataGrid:'*'+valeur+'*'});
}

Je pense que cette façon de faire est adaptable uniquement dans la mesure où il y a un datastore connecté. S'il s'agit d'un tableau HTML "basique" le seul moyen c'est de le rafraichir via un appel ajax... Par contre si c'est un tableStore je pense que c'est réalisable.

[cfried]

Comme dit par les autres membres le mieux est de créer un store remplis avec tes données.

Actuellement il y a une nouvelle API de store.

Pour ton cas je ferais un truc de ce genre :

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
<style>
 @import "js/dojo/dojox/grid/enhanced/resources/claro/EnhancedGrid.css";
</style>
<script>
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.Pagination");
dojo.require("dojox.grid.enhanced.plugins.Filter");
dojo.require("dojox.grid.enhanced.plugins.NestedSorting");
dojo.require("dojox.grid.enhanced.plugins.IndirectSelection");
 
dojo.ready(function() {
	var taGrille = new dojox.grid.EnhancedGrid({
		plugins : {
			pagination : {},
			nestedSorting : true,
			filter : true
		}
	}, "idDeTonNoeudHTML");
 
	dojo.xhrGet({
		url : "tonFichierQuiExtraitTaBaseEnJSON.php",
		content : {
			paramOptionnel : valeur
		},
		handleAs : "json",
		load : function(items) {
			taGrille.setStore(dojo.data.ObjectStore({
				objectStore : new dojo.store.Memory({
					data : items
				})
			}), {
				BLABLA_ID : "*" // on prends tout dans un premier temps
			});
		},
		error : function() {
			console.log('xhrGet failed');
		}
	});
});

Puis coté PHP pour renvoyer tes clients à toi de savoir si tu veux faire une base de données ou pas, moi je fais souvent des trucs comme ça :

Code :

1
2
3
4
5
6
<?php
$pdo = PDO2::getInstance();
$requete = $pdo -> prepare("SELECT * FROM BLABLA");
$requete -> execute() or exit(print_r($requete -> errorInfo()));
header("Content-Type", "text/json");
echo "{}&&" . json_encode(array('identifier' => 'BLABLA_ID', 'label' => 'BLABLA_LIB', 'items' => $requete -> fetchAll(PDO2::FETCH_ASSOC)));

Pourquoi cette méthode ? Parce que la grille enhanced possède directement un module de filtrage bien foutu depuis peu et donc autant l'utiliser :

http://dojotoolkit.org/reference-gui...ns/Filter.html

A bientôt, tu nous diras ce que tu as fait

[VinceCBA]

Merci à vous pour vos réponses, je travaille actuellement sur autre chose, mais je vais très vite revenir à ça (d'ici quelques jours).
Ca m'a l'air très intéressant et ca pourrait m'aider.

Je vous tiens au courant dès que j'ai bossé dessus !

Merci