jQuery.dataTable: fnAddData() exécute mais ne modifie pas le DOM

Question

Après beaucoup de recherche et d'essai, je me suis fait demander de l'aide.

Je souhaite ajouter une ligne à un DataTable à partir d'un fichier js inclus dans un fichier php, inclus dans un autre fichier php. fnAddData est correctement exécuté (retour l'index correct) mais le DOM n'est pas modifié ..

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

* vehicule_parc.php: *

<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>         
       </tbody>       
      </table> 
      <button id="addcc">Ajouter</button> 
     </div><!-- conso carburant --> 
</div><!-- left --> 
</fieldset> 

* vehicule_parc.js: *

$(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" 
     } 
    }; 

    /* ******************************************************* 
    * Main table 
    ********************************************************/ 
    /* 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" 
     } 
    }); 

    /* ******************************************************* 
    * infos box table 
    ********************************************************/ 
    var consoTable = J('#consoTable').dataTable(optTable), 
     depTable = J('#depTable').dataTable(optTable), 
     sinTable = J('#sinTable').dataTable(optTable), 
     repTable = J('#repTable').dataTable(optTable); 

    /* ******************************************************* 
    * Initialisations. 
    ********************************************************/ 
     // Variable d'autres fichiers js inclus dans vehicule_parc.php 
    formTools.init(J); 
    formConsoCarb.init(J, consoTable); 
    formDeplacement.init(J); 

    /* ******************************************************* 
    * Events 
    ********************************************************/ 

    J("#addcc").button().click(function() { 
     /////////////////////////////////////////////////////////////////////// 
    // HERE THE PROBLEM ! 
     /////////////////////////////////////////////////////////////////////// 
     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'); 
    }); 

}); 

Alors que le code suivant fonctionne bien:

test.php:

<script type="text/javascript" language="Javascript" src="js/jquery/jquery-1.4.3.min.js"></script> 
<script type="text/javascript" src="js/jquery/jquery.dataTables.js"></script> 
<script type="text/javascript" src="test.js"></script> 

<body> 
    <table id="table"> 
     <thead> 
      <tr> 
       <th>HEAD1</th> 
       <th>HEAD2</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>b</td> 
       <td>b</td> 
      </tr> 
     </tbody> 
    </table> 
    <p id="test">Ajouter</p> 
</body> 

test.js:

var J = jQuery.noConflict(); 
    J(document).ready(function() { 
     var otab = J('#table').dataTable(); 

     J('#test').click(function() { 
      //add(otab); 
      otab.fnAddData(['a', 'a']); 
     }); 
    }); 

    function add(table) { 
     table.fnAddData(['a', 'a']); 
     alert('abc'); 
    } 

EDIT: form_conso_carb.js et form_deplacement.js initialiser et configurer à la fois un (jquery.dialog)