gpt4 book ai didi

jquery - Bootstrap4 DataTables 示例不起作用

转载 作者:行者123 更新时间:2023-12-01 07:40:44 26 4
gpt4 key购买 nike

我正在尝试运行 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 版本和两个 bootstrap 版本。

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 <table> 的“基本 HTML 标记结构”没有数据。

如果您花一点时间阅读下面的评论,您可能会发现一些其他有效的标记。
;)

这是official documentation .

关于jquery - Bootstrap4 DataTables 示例不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49583705/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com