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 :

JQuery et dataTable [Plugin]


Sujet :

jQuery

  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Avril 2006
    Messages
    201
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France, Nord (Nord Pas de Calais)

    Informations forums :
    Inscription : Avril 2006
    Messages : 201
    Par défaut JQuery et dataTable
    Bonjour à tous,

    En grand débutant en JQuery que je suis, il y a des comportements que je ne comprend pas du tout.

    Voilà l'idée derrière ce bout de code :

    Faire un beau tableau (avec le plugin dataTable de JQuery).
    On pourra ajouter et supprimer des lignes de ce tableau avec deux images (+ et -)

    Cela fonctionne sans le plugin dataTable, mais pas avec. cf le code



    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
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta http-equiv="Content-Style-Type" content="text/css">
      <title></title>
      <meta name="Generator" content="Cocoa HTML Writer">
      <meta name="CocoaVersion" content="1138.47">
     
    <SCRIPT type="text/javascript" src="jquery.js"></SCRIPT>
    <SCRIPT type="text/javascript" src="js/jquery.dataTables.js"></SCRIPT>
     
     
     
    </head>
    <body>
     
    <table id="monTab">
    <thead>
    	<tr>
     
    		<th>test</th>	
    		<th>test</th>
     
    		<th>
    			<a href="#" id="addButtonAction">
    				<img src="img/add.gif" alt="ca marche pas" />
    			</a>
    		</th>
    	</tr>
    </thead>
     
    <tbody>
     
    </tbody>
     
    </table>
     
    <a href="#" id="submitButton">Envoyer</a>
     
     
    <script type="text/javascript">
     
     
     
    $(document).ready(function() 
    {
            //fonctionne sans ceci : 
    	//$('#monTab').dataTable();
     
        $("a#addButtonAction").click(function() 
                        {
     
    			$("table#monTab tbody").append('<tr id="indice">'
    				+'<td>dddd</td>'
    				+'<td>ddd</td>'
    				+' <td> <a href="#" name="removeButton" ><img src="img/remove.jpeg" alt="" /></a> '
    				+' <input type="hidden" name="dataToSend" value="critere:valeur"/>  </td> '
    				+'</tr>');
     
    	    //$('#monTab').dataTable();
     
                        }
                    );
     
        		$("table#monTab").on('click', '[name="removeButton"]', function() 
        			{
        				//on supprime la ligne courante
        				$(this).parent().parent().remove()
    			}
    		);
     
     
    		$("a#submitButton").click(function() 
                        {
    			var toSend ;
    			$('[name="dataToSend"]').each(function(index) {
    					toSend += $(this).val()+" ; ";
    			});
     
    			alert(toSend);
     
                        }
                    );
     
     
    });     
    </script>
     
    </body>
    </html>

    Avez vous des idées ?

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Avril 2006
    Messages
    201
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France, Nord (Nord Pas de Calais)

    Informations forums :
    Inscription : Avril 2006
    Messages : 201
    Par défaut
    Hello,

    merci pour ta réponse, en effet j'aurais du faire un peu plus de recherche :$

    Pour l'ajout, ça semble simple (et mieux encore, ça fonctionne !!)

    Par contre pour le delete j'ai des soucis, saurais tu m'indiquer mon erreur ?

    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
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta http-equiv="Content-Style-Type" content="text/css">
      <title></title>
      <meta name="Generator" content="Cocoa HTML Writer">
      <meta name="CocoaVersion" content="1138.47">
     
    <SCRIPT type="text/javascript" src="jquery.js"></SCRIPT>
    <SCRIPT type="text/javascript" src="js/jquery.dataTables.js"></SCRIPT>
     
     
     
    </head>
    <body>
     
    <table id="monTab">
    <thead>
    	<tr>
     
    		<th>test</th>	
    		<th>test</th>
     
    		<th>
    			<a href="#" id="addButtonAction">
    				<img src="img/add.gif" alt="ca marche pas" />
    			</a>
    		</th>
    	</tr>
    </thead>
     
    <tbody>
     
    </tbody>
     
    </table>
     
    <a href="#" id="submitButton">Envoyer</a>
     
     
    <script type="text/javascript">
     
     
     
    $(document).ready(function() 
    {
     
    	var oTable = $('#monTab').dataTable();
     
    	function fnClickAddRow() {
    		$('#monTab').dataTable().fnAddData( [
    			"data",
    			"DATA",
    			'<a href="#" name="removeButton" ><img src="img/remove.jpeg" alt="" /></a> '
    					+' <input type="hidden" name="dataToSend" value="critere:valeur"/>' ] );
    	};
     
     
     
     
    	$("a#addButtonAction").click(function() 
            {
                 fnClickAddRow();
    	});
     
     
     
     
     
     
        		$("table#monTab").on('click', '[name="removeButton"]', function() 
        			{
        				//on supprime la ligne courante
        				oTable.fnDeleteRow( $(this).parent().parent() );
    			}
    		);
     
     
    		$("a#submitButton").click(function() 
                        {
    			var toSend ;
    			$('[name="dataToSend"]').each(function(index) {
    					toSend += $(this).val()+" ; ";
    			});
     
    			alert(toSend);
     
                        }
                    );
     
     
    });     
    </script>
     
    </body>
    </html>
    Merci de vos conseils

  4. #4
    Membre confirmé
    Profil pro
    Inscrit en
    Avril 2006
    Messages
    201
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France, Nord (Nord Pas de Calais)

    Informations forums :
    Inscription : Avril 2006
    Messages : 201
    Par défaut
    Je viens de trouver une solution, si elle peut servir à quelqu'un :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    $("table#monTab").on('click', '[name="removeButton"]', function() 
        			{
        				//on supprime la ligne courante
        				var row = $(this).closest("tr").get(0);
        				//cette version ne fonctionne pas 
        				//var $row = $(this).parents("tr").eq(0)
        				oTable.fnDeleteRow(oTable.fnGetPosition($row));
        			}
    		);

  5. #5
    Membre confirmé
    Profil pro
    Inscrit en
    Avril 2006
    Messages
    201
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France, Nord (Nord Pas de Calais)

    Informations forums :
    Inscription : Avril 2006
    Messages : 201
    Par défaut datatable et sélection de ligne créée dynamiquement
    Bonjour les amateurs de JQuerry,

    Une petite question :
    Je créé dynamiquement des lignes dans ma dataTable.
    J'aimerais les enlever par un click sur un bouton dont le nom est "removeButton". Jusque là ok je passe bien dans mon "action"

    Cependant je n'arrive pas à sélectionner mon élément ligne avec le code ci-dessous

    précision : je suis en Jquery 1.5.1


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $("table#monTab").on('click', '[name="removeButton"]', function() 
        			{
        				//on supprime la ligne courante
                                   //cette version ne fonctionne pas en Jquery 1.5.1 	    				
                                   var row = $(this).closest("tr").get(0);
                                    //celle ci non plus (ni en 1.5.1 ni en lastest version)
        				//var $row = $(this).parents("tr").eq(0)
        				oTable.fnDeleteRow(oTable.fnGetPosition($row));
        			}
    		);
    Une aide serait la bien venue, je m'arrache les cheveux sur ce problème depuis 2 heures !!

    merci d'avance.

  6. #6
    Membre éclairé Avatar de tavarlindar
    Profil pro
    Inscrit en
    Janvier 2007
    Messages
    262
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2007
    Messages : 262
    Par défaut
    Bonjour,

    Ce n'est pas du jquery, mais voici une adresse de tuto qui m'a bien aider :

    très vieux mais très bon à mon goût

    Si cela peux vous aider ...

    Bon courage ,

    tavar

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Jquery DataTables triage par colonne
    Par stomerfull dans le forum jQuery
    Réponses: 0
    Dernier message: 10/08/2011, 10h54
  2. rafraichissement datatables jquery
    Par aymen8219 dans le forum jQuery
    Réponses: 0
    Dernier message: 27/07/2011, 13h16
  3. Réponses: 1
    Dernier message: 22/07/2011, 09h12
  4. Réponses: 7
    Dernier message: 08/04/2011, 10h35
  5. Framework Play avec le plugin jquery DataTables
    Par sweetyben dans le forum Play!
    Réponses: 2
    Dernier message: 07/02/2011, 16h45

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