Question

我试图从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未定义...我缺少什么？

Answer 1

你运行两个jQuery版本和两个bootstrap版本。

jQuery 3.2.1苗条和 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链接不是“苗条”版本...超薄版本排除是listed here。除非你确定你不需要Ajax和jQuery动画效果，否则我建议你使用完整版。

请注意问题的海报 （请参阅编辑） ：我为使其工作而做的最后一件事就是添加<THEAD>和<TBODY>（仅仅<tr>和<td>的表结构是不够的。）

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

<小时/> 以下是没有数据的<table>的“基本HTML标记结构”的2013 example。

如果您花一点时间阅读以下评论，您可能会发现一些额外的有效标记。
;）

这是official documentation。

Bootstrap4 DataTables示例不起作用

1 个答案: