为啥添加 DataTables 会破坏我的页面？ [关闭]

Posted 2023-03-06

【中文标题】为啥添加 DataTables 会破坏我的页面？ [关闭]

【英文标题】：Why does adding DataTables break my page? [closed]为什么添加 DataTables 会破坏我的页面？ [关闭]

【发布时间】：2017-01-31 16:40:46

【问题描述】：

我有一个包含四个象限的工作页面；三个包含 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添加到ready函数中：

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

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

Chrome 开发工具指向显示的最后一行代码，抱怨“Uncaught TypeError: $(...).DataTable is not a function”

?!?如图所示，我正在引用数据表和 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 表格中有一些异常？使用 "$('#delperfTable').DataTable();" 生成良好注释掉了...

这是更大上下文中的 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>

但它看起来仍然像以往一样普通 - 它似乎没有被数据化：

其实就是这样“开启”DataTable：

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

...导致我页面的其他部分失败（Chart.JS 图表甚至根本不显示）；注释掉“$('#delperfTable').DataTable();”导致所有其他内容再次工作，尽管当然没有对 html 表进行任何更改。

更新 2

如果我移动“$('#delperfTable').DataTable();”对于 ready 函数中的最后一件事，它不会破坏其余的代码；但它仍然什么都不做。

我仍然在控制台中看到“Uncaught TypeError: $(...).DataTable is not a function”错误消息。

【问题讨论】：

不，它在 err msg 中大写，datatables.net 的用法示例也是如此

太添加到 Jason P 的答案中，如果没有明确定义的表，数据表将无法工作，因此您必须将 <thead> 和 <tbody> 添加到您的结构中。

我根据 Jason P 将“链接”切换为“脚本”；我添加了 thead 和 tbody 部分，但仍然看不到我的表格的呈现方式。

看起来您在jquery.dataTables.min.js 之后缺少<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>。见here，点击Bootstrap按钮。

不完全是这样，但让我找到了解决方案：我必须在 dataTables javascript 文件的引用中将“href”更改为“src”。但是，从外观上看，添加 dataTables.bootstrap 完全可以解决所有问题。也许是因为我上面已经有了这个：

【参考方案1】：

使用<script> 标记包含脚本，而不是<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>