Question

经过大量的搜索和尝试后，我自己去寻求帮助。

我想从php文件中包含的js文件向dataTable添加一行，该文件包含在另一个php文件中。正确执行fnAddData（返回正确的索引）但不修改DOM ..

root.php＆lt; = vehicule_parc.php＆lt; = 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');
    });

} );

虽然以下代码效果很好：

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');
    }

编辑：form_conso_carb.js和form_deplacement.js初始化并配置jquery.dialog（）

Answer 1

我认为你也应该包括JQuery-ui。它确实有效here 但只有勾选Jquery-ui复选框

Answer 2

我解决了这个问题。我使用innerHTML += blabla创建了一些表单，现在我使用document.createElement('tag')并且它正在运行。

jQuery.dataTable：fnAddData（）运行但不修改DOM

2 个答案: