Question

我有一个有四个象限的工作页面;三个包含Chart.JS图表，另一个包含HTML表格。

我将DataTables添加到包含以下引用的页面：

<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<link href="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js" />

然后我给了html表一个ID：

<table id="delperfTable">

最后将DataTablesification jQuery添加到就绪函数中：

$(document).ready(function () {
    $('#delperfTable').DataTable();
    . . .

..这导致四个象限中的三个变为空白（具有讽刺意味的是，HTML表象限是唯一不受影响的 - 无论是正还是负 - 通过添加该行）。

Chrome开发者工具指向显示的最后一行代码，抱怨＆＃34; 未捕获的TypeError：$（...）。DataTable不是函数＆＃34;

？！？我正在引用数据表，如图所示，也是jQuery;这是我的所有css和jquery引用：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Data Tables -->
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<link href="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js" />

会发生什么？我的HTML表中有些异常吗？它使用＆＃34; $（＆＃39;＃delperfTable＆＃39;）生成罚款.DataTable（）;＆＃34;评论出来......

以下是更大背景下的HTML表格，但根据控制台错误，我不认为我的表格结构确实存在问题：

<div class="col-md-6">
    <div class="bottomright">
        <h2 class="sectiontext">Delivery Performance</h2>
        <table id="delperfTable">
            <tr>
                <th>PRO*ACT Distributor</th>
                <th>Restaurant Location</th>
                <th class="rightjustifytext">Avg Order Amount</th>
                <th class="rightjustifytext">Avg Package Count</th>
                <th class="rightjustifytext">Total Sales</th>
            </tr>

            <tr>
                <td>Sunrise FL</td>
                <td>A1A ALEWORKS - #4405 - ST. AUGUSTINE</td>
                <td class="rightjustifytext">$475.78</td>
                <td class="rightjustifytext">28.50</td>
                <td class="rightjustifytext">$1,903.10</td>
            </tr>
            . . .
        </table>
        . . .
    </div>
</div>

更新

我对javascript的引用现在是：

<script href="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

......我的桌子现在是：

<table id="delperfTable">
    <thead>
        <tr>
            <th>PRO*ACT Distributor</th>
            <th>Restaurant Location</th>
            <th class="rightjustifytext">Avg Order Amount</th>
            <th class="rightjustifytext">Avg Package Count</th>
            <th class="rightjustifytext">Total Sales</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Sunrise FL</td>
            <td>A1A ALEWORKS - #4405 - ST. AUGUSTINE</td>
            <td class="rightjustifytext">$475.78</td>
            <td class="rightjustifytext">28.50</td>
            <td class="rightjustifytext">$1,903.10</td>
        </tr>
        <tr>
            . . . // table rows elided for brevity
        </tr>
        <tr class="bold">
            <td>TOTAL</td>
            <td></td>
            <td class="rightjustifytext">375.11</td>
            <td class="rightjustifytext">23.50</td>
            <td class="rightjustifytext">$7,966.68</td>
        </tr>
    </tbody>
</table>

然而，它看起来仍像普通的香草一样 - 它似乎没有被数据化：

事实上，＆＃34;打开＆＃34; DataTable这样：

$(document).ready(function () {
    $('#delperfTable').DataTable();
    $("body").on("click", "#btnGetData",
    . . .

...导致我页面的其他部分失败（Chart.JS图表甚至根本不显示）;评论＆＃34; $（＆＃39;＃delperfTable＆＃39;）。DataTable（）;＆＃34;导致所有其他内容再次起作用，即使当然没有对html表进行任何更改。

更新2

如果我移动＆＃34; $（＆＃39;＃delperfTable＆＃39;）。DataTable（）;＆＃34;对于就绪函数内部的最后一件事，它并没有打破其余的代码;但它仍然无能为力。

我仍然看到＆＃34; Uncaught TypeError：$（...）。DataTable不是一个函数＆＃34;错误信息在控制台中。

Answer 1

使用<link>代码包含脚本，而不是<link href="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js" />

<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

应该是这样的：

<abbr title="11,201 bytes">10.9 KB</abbr>

为什么添加DataTable会破坏我的页面？

更新

更新2

1 个答案: