jQuery.dataTable : fnAddData() runs but does not modify the DOM

After lots of search and try, i bring myself to ask for help.

I want to add a row to a dataTable from a js file included in a php file, whom is included in another php file. fnAddData is correctly executed (return the correct index) but the DOM isn't modified..

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({开发者_StackOverflow社区
        "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');
    });

} );

While the following code works well :

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 and form_deplacement.js initialize et configure both a jquery.dialog()

---

I think you should include JQuery-ui too. It does work here But only if you tick the Jquery-ui checkbox

---

I solve the problem. I created some forms with innerHTML += blabla, now i use document.createElement('tag') and it's working.