Plugin Datatable

Version imprimable

Plugin Datatable

Bonjour,

J'ai un petit soucis, j'aurai besoin de passer un paramètre à ma fonction click dans ma fonction live.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
$('.ajouterMail').live('click',function(){
 
	var idContact = $(this).attr('idContact');
	var email = $(this).attr('email');
	var action = "<input name='mails[]' type='hidden' value='"+idContact+"'/><a href='#' idContact='"+idContact+"' class='supprimerMail'>-</a>";
 
	 if($('#listeMailsSelectionnes_filter').size() > 0){
		 $('#listeMailsSelectionnes_filter').remove();
	}
	if($('#listeMailsSelectionnes_paginate').size() > 0){
		$('#listeMailsSelectionnes_paginate').remove();
	}
 
	logDebug(oTableListeMailsSelectionnes);
	//oTableListeMailsSelectionnes.fnAddData( [email,action]);
 
 
})

Dans cette exemple, j'aurai besoin de récupérer oTableListeMailsSelectionnes comme paramètres. Pour l'instant, c'est une variable globale, mais j'ai l'impression que ca ne fonctionne pas bien.

Le but est de recuperer un instance de dataTable défini dans une autre fonction afin de pouvoir ajouter une ligne à ma table existante. Actuellement, la fonction fnAddData (en commentaire dans le code ci dessus), me vide mon tableau, j'ai donc l'impression que je ne récupère pas la bonne instance.
Voici la fonction où est défini ma variable (à la fin de la fonction).
La déclaration de la variable est faite en dehors du document ready afin de rendre la variable global.

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
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
 
 $('.modif').live("click",function(){
		//ID de la mailing list
		var id = $(this).parent().parent().attr('id');
 
		$.modal("<div><h2>Chargement de la mailing liste en cours</h2>Ce chargement peut durer plusieurs minutes selon le nombre de contact dans la mailing liste.</div>");
		//Il va falloir récupérer le nom et la description puis les contacts existants
		//On va appeler le script de suppression
		 $.ajax({
			   type: "POST",
			   url: "getMailingListeHTML.php",
			   timeout:1000000,
			   data: "id="+id,
			   dataType: 'xml',
			   success: function(responseXML) {
					  if($(responseXML).find('error').size > 0) {
						  var showErreur = "<ul>";
						  $(responseXML).find('error').each(function(){
								showErreur += "<li>" +$(this).find('error').text() +"</li>";
							})
							showErreur += "</ul>";
						  $.modal("<div><h2>Erreur</h2>"+showErreur+"</div>");
					  } else {
 
					        var nom = $('nom', responseXML).text();
					        var description = $('description', responseXML).text();
				            var tabHTML = $('chaine', responseXML).text();
					   		var listeID = $('listeID', responseXML).text();
 
							//On affiche le formulaire
					   		$('#divGestionMailingListe').show('slow');
							$('#divAjouterMailingListe').hide();
 
							//On vide le formulaire au cas ou il resterai des données
							initFormMailingListe();
							//On pré-remplit les champs
							$('#nom').val(nom);
							$('#description').val(description);
							$('#idMailingListe').val(id);
 
 
					     	tabIDContact = listeID.split(',');
 
					     	$('#listeMailsSelectionnes tbody tr').remove();
					     	$('#listeMailsSelectionnes tbody').append(tabHTML);
 
 
 
					     	 if($('#listeMailsSelectionnes_filter').size() > 0){
				        		 $('#listeMailsSelectionnes_filter').remove();
					        }
					     	 if($('#listeMailsSelectionnes_paginate').size() > 0){
				        		 $('#listeMailsSelectionnes_paginate').remove();
					        }
 
					     	oTableListeMailsSelectionnes = $('#listeMailsSelectionnes').dataTable( {
								"bPaginate": true,
								"bLengthChange": false,
								"bFilter": true,
								"bSort": true,
								"bInfo": false,
								"sPaginationType": "full_numbers",	
								"bAutoWidth": false } );
 
							$.modal.close();
 
 
			      }
		 		}
			 });	
 
	});

Si vous avez une autre idée que le passage de paramètre pour récupérer la bonne instance de mon tableau sans qu'il m'efface toutes mes données, je suis preneur!

Merci d'avance.

Bonsoir.

Je ne connais pas le plug-in Datatable, mais je viens de tester un exemple simple, avec la même structure que votre code, il fonctionne. Votre problème doit être ailleurs.

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
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
98
99
100
101
102
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<meta name="description" content="Page type">
	<title>Page type</title>
	<style>
		@import "../dataTables-1.6/media/css/demo_page.css";
		@import "../dataTables-1.6/media/css/demo_table.css";
 
		/* BASE */
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
		div#affiche {
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
 
		/* TEST */
	</style>
	<script charset="utf-8" src="../lib/jqueryui-1.8/js/jquery-1.4.2.min.js"></script>
	<script charset="utf-8" src="../dataTables-1.6/media/js/jquery.dataTables.js"></script>
	<script>
		$(function(){
			var oTable = null;
 
			$("#btn2").live("click", function(){
				oTable.fnAddData([2.1,2.2,2.3,2.4]);
			});
 
			$("#btn1").live("click", function(){
				oTable = $("#example").dataTable();
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<button id="btn1">Créer la table</button> <button id="btn2">Ajouter une ligne</button>
		<div id="demo">
			<table id="example"> 
				<thead> 
					<tr> 
						<th>Column 1</th> 
						<th>Column 2</th> 
						<th>Column 3</th> 
						<th>Column 4</th> 
					</tr> 
				</thead> 
				<tbody> 
					<tr> 
						<td>1.1</td> 
						<td>1.2</td> 
						<td>1.3</td> 
						<td>1.4</td> 
					</tr> 
				</tbody> 
			</table>
		</div>
		<div class="spacer"></div>
	</div>
</body>  
</html>

Bonjour,

En fait le problème devait venir du fait que j'avais une double instanciation, en effet je réinstanciais après avoir fait un append des mes nouvelles lignes afin quelle soit prises en compte.

Finalement, je n'utilises plus cette méthode, et je n'utilises que la fonction fnAddData pour ajouter des données à mon tableau instancier au tout début.

Maintenant j'ai un autre soucis avec ce plugin.

Pour remettre dans le contexte, je suis un train de faire un outils de gestion des mailings listes, avec un tableau listant les contacts et un tableau listant les contacts ajoutés à ma mailing liste en cours d'édition ou de création.

Comme je peux avoir beaucoup de contact dans une mailing liste, j'ai donc décidé de paginé mes tableaux (10 par page).

Le tableau des contacts sélectionnés est dans une balise form, et chaque ligne contient un champs caché avec l'ID du contact, comme ca lors de la soumission du formulaire, je devais récupérer tout champs cachés

Exemple de code généré
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <table width="45%" cellspacing="0" cellpadding="0" border="0" class="display" id="listeMailsSelectionnes"> <thead> <tr> <th class="sorting_asc">Email</th> <th class="sorting">Actions</th> </tr> </thead> <tbody> <tr class="odd"> <td class="sorting_1">74julien@wanadoo.fr</td> <td class=""><input type="hidden" name="mails[]" value="4815"><a idcontact="4815" class="supprimerMail" href="#">-</a></td></tr> <tr class="even"> <td class="sorting_1">a.depret@groupe-korian.com</td> <td class=""><input type="hidden" name="mails[]" value="19454"><a idcontact="19454" class="supprimerMail" href="#">-</a></td></tr> </tbody> </table>
Le problème est que ce tableau est paginé, et le plugin génére à la volée le contenu du tableau, ce qui veut dire que dans le dom, je n'ai que les 10 éléments affichés à l'écran, donc seulement 10 champs cachés. Et logiquement, lors de la soumission de mon formulaire, je ne récupère que les 10 contacts affichés à l'écran.

C'est très embêtant, il doit bien y avoir un moyen de récupérer tous mes champs, mais je ne vois pas du tout comment.

Auriez vous des idées pour que je puisse récupérer une liste d'identifiant et surtout pouvoir ajouter et supprimer facilement des identifiant de cette liste en Javascript

J'ai pensé à mettre tous mes identifiants séparé par une virgule dans un champs caché, mais pas facile de gérer les suppressions.

Une idée?

Bonsoir.

Si j'ai bien compris, il s'agit de récupérer la valeur de tous les input hidden.

Exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
var oTable = null;
var mailsTab = [];
 
oTable = $("#listeMailsSelectionnes").dataTable();
 
$(oTable).find("input[type='hidden']").each(function(i, item){
	mailsTab.push($(item).val());
});
 
//Firebug
console.log(mailsTab.join());

30/04/2010, 13h53
Appollyon666

Peut etre que ca pourrait marcher, mais j'ai changer de méthode, je ne mets plus mes champs cachés dans le tableau, je les mets dans un div externe, et je donne un id à tous mes champs, comme ca je peux les supprimer et les ajouter facilement, et ils sont tous présents lors de la soumission de mon formulaire.

Merci pour ton aide