IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Datatable et columnFilter


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé Avatar de pymouse
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Décembre 2004
    Messages
    137
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Décembre 2004
    Messages : 137
    Par défaut Datatable et columnFilter
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 ,

  2. #2
    Membre confirmé Avatar de pymouse
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Décembre 2004
    Messages
    137
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Décembre 2004
    Messages : 137
    Par défaut
    Solution de secours trouvé :

    utiliser le { type: "checkbox"}

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

  3. #3
    Membre régulier
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    8
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2010
    Messages : 8
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    <script type="text/javascript" src="jquery-1.6.2.js"></script>
    et
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <script type="text/javascript" src="dt/media/js/jquery.dataTables.js"></script>
    ).

    voici le code (bidon soit-il) :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 !

  4. #4
    Membre confirmé Avatar de pymouse
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Décembre 2004
    Messages
    137
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Décembre 2004
    Messages : 137
    Par défaut
    Il faut que tu importe le CSS fourni par le pluging
    c'est à dire :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    $("#mytableau").dataTable({
    "bJQueryUI": true
    });

  5. #5
    Membre régulier
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    8
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2010
    Messages : 8
    Par défaut
    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/.

  6. #6
    Membre éclairé Avatar de stomerfull
    Inscrit en
    Septembre 2005
    Messages
    307
    Détails du profil
    Informations forums :
    Inscription : Septembre 2005
    Messages : 307
    Par défaut
    salut à tous

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

    Une piste :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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);
     
    		} );
     
    	    }
     
           }
     
     
    } );

Discussions similaires

  1. [VB.NET][ADO]Fusionner des dataTables
    Par neo.51 dans le forum Windows Forms
    Réponses: 5
    Dernier message: 30/07/2005, 00h22
  2. [C#] Requete entre deux DataTables
    Par pc152 dans le forum Accès aux données
    Réponses: 2
    Dernier message: 02/09/2004, 11h24
  3. [VB.NET] Suppression de ligne dans un DataTable
    Par seemax dans le forum Windows Forms
    Réponses: 7
    Dernier message: 06/05/2004, 14h19
  4. Réponses: 2
    Dernier message: 20/02/2004, 08h47
  5. Réponses: 3
    Dernier message: 21/05/2003, 11h44

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo