Datatable et columnFilter

[pymouse]

Bonjour à tous,

J'ai installé le pluging dataTable en jquery ainsi que le pluging columnFilter pour permettre un tri sur chaque colonnes:

http://jquery-datatables-column-filt...unk/index.html

par défaut on peux choisir le filtre en zone de texte ou en liste de sélection :

j'aimerai pouvoir filtrer une colonne avec une sélection à choix multiple , j'ai le pluging multiselect pour créer des listes à choix multiples mais je ne sais pas comment intégrer sa dans le filtre de ma colonne..

J'espere avoir été assez clair, si quelqu'un aurait des pistes ..

je vous montre mon code en simplifié :

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
 
$("#mytableau").dataTable().columnFilter({
			sPlaceHolder: "head:before",
			aoColumns: [ { type: "select"},
			                  { type: "select"},
			                  { type: "text",bRegex:true },
			 		  { type: "select"},
			 		  { type: "select"},
			 		  { type: "select"},
			 		  { type: "select"}
				        ]
			});
 
// pour l'instant tous les tris sur les colonnes sont fais par des listes de sélection simple 
 
//Code tu tableau : 
<table class="mytableau" id="mytableau" cellspacing="0" width=80%;>
		<thead>
			<tr>
    			<th>Num REA</th>
    			<th>Projet</th>
    			<th>Item</th>
    			<th>Sévérité</th>	    			
    			<th>Date Création</th>
    			<th>Age</th>
    			<th>Statut</th>
			</tr>
    	</thead>
		<tbody>   	
    		<tr>
    			<td><?php echo $aDonnes->getNumRea(); ?></td>
    			<td><?php echo $aDonnes->getProjet(); ?></td>				    	
    			<td><?php echo $aDonnes->getDesignationItem(); ?></td>
    			<td><?php echo $aDonnes->getPriorite(); ?></td>				    				    			
    			<td><?php echo $date["jour"]."/".$date["mois"]."/".substr($date["annee"],2,2)?></td>
    			<td><?php echo $aDonnes->getAgeRea();?></td>
    			<td><?php echo $aDonnes->getStatut();?></td>
    		</tr>
    	</tbody>
</table>

Puisque un bon dessin vaux mieux qu'un long discours : voici comment se présente ma table, je voudrais pouvoir mettre une liste a choix multiple à la place de la liste simple présente dans la colonne "sévérité"



Merci ,

[pymouse]

Solution de secours trouvé :

utiliser le { type: "checkbox"}

me reste maintenant a trouver comment modifier l'affichage de la fênetre

[osef91]

Bonjour tout le monde,

Je me permet de relancer le sujet car j'ai un petit problème pour l'installation de DataTables.
En effet, après avoir (je pense) correctement chargé les différentes librairies (

Code :

<script type="text/javascript" src="jquery-1.6.2.js"></script>

et

Code :

<script type="text/javascript" src="dt/media/js/jquery.dataTables.js"></script>

).

voici le code (bidon soit-il) :

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
42
43
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    <thead>
        <tr>
            <th>Rendering engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Engine version</th>
            <th>CSS grade</th>
        </tr>
    </thead>
    <tbody>
        <tr class="gradeX">
            <td>Trident</td>
            <td>Internet
                 Explorer 4.0</td>
            <td>Win 95+</td>
            <td class="center">4</td>
            <td class="center">X</td>
        </tr>
        (...)
        <tr class="gradeA">
            <td>Webkit</td>
            <td>Safari 1.2</td>
            <td>OSX.3</td>
            <td class="center">125.5</td>
            <td class="center">A</td>
        </tr>
    <tfoot>
        <tr>
            <th>Rendering engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Engine version</th>
            <th>CSS grade</th>
        </tr>
    </tfoot>
</table>
 
<script type="text/javascript">
	$(document).ready(function() {
		$('#example').dataTable();
	} );
</script>

J'ai mon tableau qui est "brut", comme si le CSS n'était pas chargé !!! Est-ce qu'il faut préciser où se trouve le CSS dans le package? ou bien devrait-il aller le chercher tout seul?
Les champs (search et shows) fonctionnent correctement.
Voici un lien de la capture d'écran de ma datatable : http://www.hostingpics.net/viewer.ph...4datatable.png

Est-ce quelqu'un sait pourquoi j'ai ce tableau tout moche ??

MErci par avance !

[pymouse]

Il faut que tu importe le CSS fourni par le pluging
c'est à dire :

Code :

1
2
3
 
	<link rel="stylesheet" type="text/css" href="js/jquery.datatables/media/css/demo_table.css"  />
	<link rel="stylesheet" type="text/css" href="js/jquery.datatables/media/css/demo_page.css"  />

ensuite si sa ne marche pas trop , essaie de rajouter sa :

Code :

1
2
3
4
$("#mytableau").dataTable({
"bJQueryUI": true
});

[osef91]

Okay merci.
Est-ce que tu sais où je peux récupérer ce thème : http://www.datatables.net/styling/themes/le-frog ?

Edit : je retire ce que je viens de dire. Il suffit de télécharger le package de thème de JqueryUI depuis http://blog.jqueryui.com/2009/06/jquery-ui-172/.

[stomerfull]

salut à tous

Pour moi je l'ai ecrit manuelle les champs que je voulais spécifier en champ select

Une piste :

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
$("thead.jfiltre th").each( function ( i ) {
 
 
 
    if(i==8)
 
    {
 
 
       // Récupérer ici l'id du champ dont on ne va pas transformé en select
 
         var nom = $("thead.jfiltre input").attr("name");
 
//alert(nom);
 
          if(nom != 'place')
          {
 
  		this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
 
		$('select', this).change( function () {
 
 
			oTable.fnFilter( $(this).val(), i);
 
		} );
 
	    }
 
       }
 
 
} );