Manipulation des datatables (manipulation des nouvelles lignes)

Version imprimable

Bonjour tout le monde!;)

j'ai un soucis avec la manipulation des datatables: je m'explique;je possède une datatable et un bouton ajouter pour ajouter un enregistrement.
ma question concerne le cote présentation:comment puis je gérer les différents id dans ces nouvelles ligne du tableau sachant que j'utilise la fonction dataTable().fnAddData() qui permet d’insérer une nouvelle ligne dans le tableau.
D'une part lorsque j'attribue une classe à certains éléments de la ligne via cette fonction,ces classes ne sont pas prises en compte.
'd'autre part comment puis-je gerer des id de façon dynamique pour les manipuler.
Voici la fonction qui ajoute un ligne dans le tableau au clic
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function fnClickAddRow() { $('#ref').dataTable().fnAddData( [ "<input id='ref4' type='text' name='' value='' >", "<input id='ref44' type='text' name='' value=''>", "", "<div class='text-center'><a class='text-center' onclick='fnok();' id='ok4'>ok</a><a class='px-icon_edit' onclick='fnmod();' id='m4' hidden></a></div>", "<div class='text-center'><a id='annuler' >Annuler</a><input class='text-center' id='s4' class='CB' type='checkbox' hidden></div>", ] ); $('#ref').dataTable().fnDraw(); $('#ajout').prop("disabled",true); $('#supp').prop("disabled",true); }
Comme on le remarque ,toute les lignes générées auront des input avec les id ref4 et ref44 etc.
la solution qui m'a parue être plus interressante est d'attribuer une classe a ces elements mais ces classes ne sont pas prises en compte
Je vous remercie d'avance pour votre aide.

06/05/2014, 20h36
danielhagnoul

Bonsoir

Voir la réponse de allan (2010) dans http://datatables.net/forums/discuss...fter-fnadddata

Plus récent : http://stackoverflow.com/questions/2...d-to-added-row

Mais je ne trouve pas fnCreatedRow dans l'API.

merci beaucoup!
je vais tester tout cela mais je pense que c bon !!
ce code est bien sur à mettre dans le script lié à la datatable:

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
var table = $('#example').dataTable({
                                "bJQueryUI": true,
        			"bLengthChange": true,
        			"sPaginationType": "full_numbers",
        			"aaSorting": [[ 0, "asc" ]],
        			"sFilter": "dataTables_filter",
        			//"sScrollY": "329px",
        			//"bScrollCollapse": true,
        			"sDom": '<"legendR"rlip>t',
        			 "oLanguage": {
        				 "sSearch": "",
        				 "sLengthMenu": "",
        				 "sInfo": "",
        				 "oPaginate": {
        					 "sPrevious": "",
        					 "sNext": "",
        					 "sLast": "",
        					 "sFirst": ""
        				},
                                         "fnCreatedRow": function (nRow, aData, iDataIndex) {
                                                  $(nRow).attr('id', 'my' + iDataIndex) //code concernant ma question
                                        },
        				"sInfoEmpty": "",
        				"sInfoFiltered": ""
        			}
    
                                				
        		} );

code biensur modifiable et à tester....
En tout cas je renouvelle mes remerciements
A+

Bonjour,
Il faut noter que cette réponse satisfait partiellement ma question dans le sens où le code attribut un id à la nouvelle ligne et permet de la retrouver pour effectuer des traitements dessus;ce qui me convient bien que je pense que les lignes peuvent implicitement être gérées si les événements sont dans la ligne même.
par exemple les liens de suppression de lignes X ou de modification dont le code peut être le suivant:
Code:

1 2 3 4 5 var row = $(this).closest('tr'); var nRow = row[0]; //console.log(nRow); $('#nom_de_la_datatable').dataTable().fnDeleteRow(nRow);
Le problème exact qui se pose à moi est que lorsque je crée une nouvelle ligne grâce à un bouton "ajouter ligne" n'est pas l'attribution d'un id à cette ligne pour la manipuler mais plutôt d'attribuer des id dynamiques aux éléments de la ligne qui peuvent être des inputs, des images...
Pour une meilleure illustration il faut revoir le code de mon premier message et plus exactement la fonction fnClickAddRow() qui crée une nouvelle ligne au Click sur le bouton mais génère des lignes avec des éléments dont les id sont identiques (exemple id='ref4' ou ref44).j'ai essayer d'attribuer des id formée par concaténation mais ce n'est pas pris en compte.
Ma question est donc :
Comment modifier ce code de façon à attribuer des id dynamiquement pour chaque élément de la nouvelle ligne(en d'autre terme enlever les 'ref4' , 'ref44' , 'ok4' ,'m4' et 's4') car ces deux inputs doivent être repérables et uniques pour chaque nouvelle ligne créée(le Click sur le bouton ajouter une seconde fois dois générer une ligne avec les id 'ref5','ref55', 'ok5','m5' et 's5'. voici le code concerné:
Code:

1 2 3 4 5 6 7 8 9 $('#ref').dataTable().fnAddData( [ "<input id='ref4' type='text' name='' value='' >", "<input id='ref44' type='text' name='' value=''>", "", "<div class='text-center'><a class='text-center' onclick='fnok();' id='ok4'>ok</a><a class='px-icon_edit' onclick='fnmod();' id='m4' hidden></a></div>", "<div class='text-center'><a id='annuler' >Annuler</a><input class='text-center' id='s4' class='CB' type='checkbox' hidden></div>", ] );
merci d'avance.
j'ai mis que la discussion était résolue car elle l'est partiellement mais je continue à poster pour compléter la réponse.

09/05/2014, 11h35
danielhagnoul

Bonjour

Créer des ID dynamiquement n'est pas difficile -- var n = 0; et pour chaque ID : "id" + $.now() + n++; j'ai utilisé cette technique pour le plugin dvjhClone , mais plus tard, retrouver le bon ID pour exécuter une tâche c'est plus dur.

Re
Merci pour ton aide.
c'etait en effet une simple conctenation qu'il fallait faire avec une variable globale.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
 var x=4;
    function fnClickAddRow() {
        var col1 ="<input id='ref" + x + "' type='text' name='' value='' >";
        var col2 ="<input id='lib" + x + "' type='text' name='' value=''>";
        var col3 ="";
        var col4 = "<div class='text-center'><a class='text-center' onclick='fnok();' id='ok" + x + "'>ok</a><a class='px-icon_edit' style='display:none'  onclick='fnmod();' id='m" + x + "' ></a></div>";
        var col5 = "<a id='annuler' >Annuler</a><input style='display:none' id='s" + x + "' type='checkbox' >";
        $('#table').dataTable().fnAddData( [
		col1,
		col2,
        col3,
        col4,
        col5,
         ]
      ); x++;
 
      $('#table').dataTable().fnDraw();
 
 
    }

Et concernant la manipulation c'est exactement ça le problème qui se pose.j'essaye donc de lier les événements à la ligne et ça me facilite un peu la tache mais c vrai que ce n'est pas evident du tout.
ca me donne quelque chose comme ca mais je dois encore y travailler:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
function fnok() {
        y= x-1;
    	var ref='#ref'+ y +"";
    	var lib='#lib'+ y +"";
    	var mod='#m'+ y +"";
    	var ok='#ok'+ y +"";
    	var s='#s'+ y +"";
    	if($(ref).val().length >8 && $('#ref4').val().length <10){alert("refok");
    	if($(lib).val().length >0){alert("libok");
    	$(ref).prop("disabled",true);
    	$(lib).prop("disabled",true);
    	$(mod).css({"display":"block"});
    	$(ok).css({"display":"none"});
    	$('#ajout').prop("disabled",false);
    	$(s).show();
    	$('#annuler').css({"display":"none"});
    	}else{alert("libelle non conforme!");} 
        	}else{alert("reference non conforme!");}
 
         }

la variable x est incrémentée pour assurer l'ajout d'une nouvelle ligne et y garde l'indice de la ligne actuelle.
c'est dommage que cela nécessite un traitement particulier et assez complexe pour la gestion des datatables alors que le plug in me plait bien
En tout cas merci pour ton aide de très grande qualité