Bootstrap4 DataTables 示例不起作用答案

【问题标题】：Bootstrap4 DataTables example not workingBootstrap4 DataTables 示例不起作用
【发布时间】：2018-03-31 02:42:44
【问题描述】：

我正在尝试从https://datatables.net/examples/styling/bootstrap4.html 运行示例

我的代码是这样的

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#maintable').DataTable();
});

但我在浏览器控制台中不断收到错误...函数DataTable 未定义...我错过了什么？

【问题讨论】：

尝试将 jquery-1.12.4.js 的位置更改为所有 js 的顶部

标签： jquery datatables bootstrap-4

【解决方案1】：

您运行两个 jQuery 版本和两个引导程序版本。

jQuery 3.2.1 slim 和 1.12.4。

我建议你在<head>试试这个：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/dataTables.bootstrap4.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.1/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>

还有这个脚本：

<script type="text/javascript">
$(document).ready(function() {
    $('#maintable').DataTable();
});

注意：上面的 jQuery 链接不是“slim”版本...slim 版本排除项是listed here。除非你确定你不需要 Ajax 和 jQuery 动画效果，否则我建议你使用完整版。

问题海报中的注释 （查看编辑）：我自己修复的最后一件事是添加<THEAD> 和<TBODY>（只有<tr> 和<td> 的表结构是不够的）。

<table>
  <thead>
    <!-- some <th>... -->
  </thead>
  <tbody>
  </tbody>
</table>

这是一个 2013 example 的«基本 HTML 标记结构»，用于没有数据的 <table>。

如果您花一点时间阅读下面的 cmets，您可能会发现一些额外的有效标记。
;)

这里是official documentation。

【讨论】：

现在收到Uncaught TypeError: Cannot read property 'mData' of undefined
Codepen 此处（无数据）。您还必须关注DataTables documentation。