Question

我可以让它在JSFiddle中运行但不在我的站点中运行。刚刚从我的php页面复制了表格数据，并删除了每个循环，并替换为一些数据你可以看到JSFiddle here。

为什么我不能在我的php页面中复制JSFiddle？
更新我在脚本控制台中获得以下内容：return window.wrappedJSObject || window;

我的php输出是这样的：

<div>
<table class="table table-striped table-bordered table-hover" id="myTable">
    <div><h2>Mapa Analítica</h2></div>
    <thead>
        <tr>
            <th class="text-center" style="vertical-align:middle;">Name</th>
            <th class="text-center">Tipo Documento</th>
            <th class="text-center">Número</th>
            <th class="text-center">Cliente</th>
            <th class="text-center">Obra</th>
            <th class="text-center">Designação</th>
            <th class="text-center">Agregado</th>
            <th class="text-center sum">Quantidade (ton)</th>
        </tr>
    </thead>

    <tfoot>

        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>

        </tr>

    </tfoot>

    <tbody>
    <?php foreach ($positions as $position): ?>

            <tr>
                <td class="text-center"><?= $position["data"] ?></td>
                <td class="text-center"><?= $position["tipo"] ?></td>
                <td class="text-center"><?= $position["num"] ?></td>
                <td class="text-center"><?= $position["cliente"] ?></td>
                <td class="text-center"><?= $position["obra"] ?></td>
                <td class="text-center"><?= $position["nome_obra"] ?></td>
                <td class="text-center"><?= $position["agr"] ?></td>
                <td class="text-center"><?= $position["ton"] ?></td>
            </tr>

    <?php endforeach ?>
    </tbody>



</table>

位于footer.php中的js函数是：

$(document).ready(function() {
$('#myTable').DataTable( {
    "footerCallback": function ( row, data, start, end, display ) {
        var api = this.api(), data;

        // Remove the formatting to get integer data for summation
        var intVal = function ( i ) {
            return typeof i === 'string' ?
                i.replace(/[\$,]/g, '')*1 :
                typeof i === 'number' ?
                    i : 0;
        };

        // Total over all pages
        total = api
            .column( '.sum' )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Total over this page
        pageTotal = api
            .column( '.sum', { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Update footer
        $( api.column( '.sum' ).footer() ).html(
            '$'+pageTotal +' ( $'+ total +' total)'
        );
    }
} );

}）;

在head元素中，我包括以下所有内容：

<head>
    <!-- jquery para colocar a cor vermelha no navbar -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <!--  BOOTSTRAP -->
    <link href="../public/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <link href="../public/css/style.css" rel="stylesheet"/>
    <script src="../public/js/bootstrap.min.js"></script>

    <!-- jquery para choosen ver: https://harvesthq.github.io/chosen/ e dataTables ver: https//www.datatables.net
            também para datetimepicker ver:https://eonasdan.github.io/bootstrap-datetimepicker/-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
    <link rel="stylesheet" href="../public/js/DataTables-1.10.12/media/css/dataTables.bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />



    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
    <script src="../public/js/DataTables-1.10.12/media/js/jquery.dataTables.min.js"></script>
    <script src="../public/js/DataTables-1.10.12/media/js/dataTables.bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js"></script>

Bootstrap dataTables＆＃34; footerCallback＆＃34;总和不工作

0 个答案: