plugin DataTable, fnAddData s'execute mais ne modifie pas le DOM

Bonjour,

Après pas mal de recherches, et d'essais dans mon code, je ne parviens pas à ajouter de ligne dans ma dataTable.
La fonction fnAddData s'execute correctement - retourne le bon index dans la table - mais le DOM de ma page n'est pas modifié, donc pas d'ajout de ligne...

Mon code js est dans un fichier qui est inclu dans un fichier php qui est lui meme inclu dans un autre fichier php.

root.php <= vehicule_parc.php <= vehicule_parc.js

vehicule_parc.php :

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
<script type="text/javascript"  language=javascript src="../js/vehicule_parc.js"></script>
<script type="text/javascript"  language=javascript src="../js/form_tools.js"></script>
<script type="text/javascript"  language="javascript" src="../js/form_conso_carb.js"></script>
<script type="text/javascript"  language="javascript" src="../js/form_deplacement.js"></script>
 
<fieldset class="infoBoxBody">
	<div id="left">
		<h3 class="headInfoBox" id="cch">Conso Carburant >></h3>
		<hr />
		<div id="cc">			
			<table cellpadding="0" cellspacing="0" border="0" class="display boxtable" id="consoTable">
				<thead>
					<tr>
						<th>Date</th>
						<th>Heure</th>
						<th>Quantité</th>
						<th>Coût</th>
						<th>Carte</th>
					</tr>
				</thead>
				<tbody>
					<tr class="odd gradeA">
						<td>21/03/2011</td>
						<td>10:00</td>
						<td>30</td>
						<td>40</td>
						<td>02248</td>
					</tr>
					<tr class="odd gradeA">
						<td>05/03/2011</td>
						<td>12:16</td>
						<td>35,02</td>
						<td>50</td>
						<td>02248</td>
					</tr>
					<tr class="odd gradeA">
						<td>05/03/2011</td>
						<td>12:16</td>
						<td>35,02</td>
						<td>50</td>
						<td>02248</td>
					</tr>
					<tr class="odd gradeA">
						<td>05/03/2011</td>
						<td>12:16</td>
						<td>35,02</td>
						<td>50</td>
						<td>02248</td>
					</tr>									
				</tbody>						
			</table>
			<button id="addcc">Ajouter</button>
		</div><!-- conso carburant -->
</div><!-- left -->
</fieldset>

vehicule_parc.js :

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
$(document).ready(function() {
	/* *******************************************************
	 * Variables
	 ********************************************************/
	var J		= jQuery.noConflict(),
 
	boxes		= [ ["#cch", "#cc"],
	         	    ["#sinh", "#sin"],
	         	    ["#deph", "#dep"],
	         	    ["#reph", "#rep"] ],
	optTable	= {
		"bRetrieve":true,
		"bDestroy":true,
		"sScrollY": 200,
		"sScrollX": "100%",
		"sScrollXInner": "100%",
		"bScrollCollapse": true,
		"oLanguage": {
			"sLengthMenu": "_MENU_ lignes / page",
			"sZeroRecords": "Rien de trouvé - désolé",
			"sInfo": "Montre _START_ à _END_ de _TOTAL_ enregistrements",
			"sInfoEmpty": "Montre 0 à 0 de 0 enregistrement",
			"sInfoFiltered": "(filtré de _MAX_ enregistrements au total)",
			"sSearch": "Recherche"
		}
	};
 
	/* *******************************************************
	 * Tableau principal
	 * Chaque clique sur une ligne du tableau :
	 * - active la ligne cliqué
	 * - désactive toute les autres
	 * - rempli les formulaires visibles
	 ********************************************************/
	/* Initialisation */
	var mainTable = J('#dataTable').dataTable({
		"bRetrieve":true,
		"bDestroy":true,
		"sScrollY": 220,
		"sScrollX": "100%",
		"sScrollXInner": "180%",
		"oLanguage": {
			"sLengthMenu": "Affiche _MENU_ enregistrements par page",
			"sZeroRecords": "Rien de trouvé - désolé",
			"sInfo": "Montre _START_ à _END_ de _TOTAL_ enregistrements",
			"sInfoEmpty": "Montre 0 à 0 de 0 enregistrement",
			"sInfoFiltered": "(filtré de _MAX_ enregistrements au total)",
			"sSearch": "Recherche"
		}
	} );
 
	/* *******************************************************
	 * Tableau des boites d'infos
	 ********************************************************/
	var consoTable	= J('#consoTable').dataTable(optTable),
		depTable	= J('#depTable').dataTable(optTable),
		sinTable	= J('#sinTable').dataTable(optTable),
		repTable	= J('#repTable').dataTable(optTable);
 
	/* *******************************************************
	 * Initialisations.
	 * Il est important d'initialiser tous les scripts
	 * formulaire avant de les affecter à un evenement
	 ********************************************************/
        // Variable d'autres fichiers js inclus dans vehicule_parc.php
	formTools.init(J);
	formConsoCarb.init(J, consoTable);
	formDeplacement.init(J);
 
	/* *******************************************************
	 * Evenements
	 ********************************************************/
        ///////////////////////////////////////////////////////////////////////
	// HERE THE PROBLEM !
       ///////////////////////////////////////////////////////////////////////
	 J("#addcc").button().click(function() {
		 var tmp = consoTable.fnAddData(['a','a','a','a','a']);
		 alert( tmp );
		formConsoCarb.open("new");
	});
 
	J("#adddeplacement").button().click(function() {
		formDeplacement.open("new");
	});
 
 
	J('#dataTable tr').live('click', function() {
		removeClassesFor("#dataTable tr", "row_selected");
		J(this).addClass('row_selected');
	});
 
	J('#consoTable tr').live('click', function() {
		removeClassesFor("#consoTable tr", "row_selected");
		J(this).addClass('row_selected');
	});
 
} );

En espérant que vous pourrez m'aider.

Bonsoir

Votre manière d'utiliser jQuery.noConflict() me semble bizarre !

Je vous suggère de faire un test avec la méthode ci-dessous :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<script>
	jQuery.noConflict();
 
	jQuery(function($){
		var boxes ...
 
		// le reste du code modifié
		// remplacer chaque J par un $
 
		$('#consoTable tr').live('click', function() {
			removeClassesFor("#consoTable tr", "row_selected");
			$(this).addClass('row_selected');
		});
	});
</script>

Merci pour ta réponse, mais le problème ne vient pas de là.
J'utilisai innerHTML pour créer un formulaire, je l'ai remplacé par l'instanciation d'objets js ( createElement() ), et tout fonctionne maintenant.