html - 实现 Bootstrap 4 数据表

Question

我正在尝试实现一个 bootstrap 4 数据表，但似乎无法让它工作。在我的脑海中，我有所需的 CSS

    <link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet">

然后我在下面有以下必需的脚本:

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

然后我将脚本调用到我的标准格式的 HTML 表中，正确的 ID 如下:

<script>
$(document).ready(function() {
    $('#myTable').DataTable();
} );
</script>

这些都不起作用，并且该表使用普通的 Bootstrap 4 表显示，没有搜索/排序功能。谁能解释我在这里做错了什么？

谢谢

编辑:不幸的是，我尝试了这个，它似乎破坏了整个网站的 CSS。我真正想做的只是显示我的 bootstrap 4 表的前 10 行，但每次我用谷歌搜索它时，它都会给出数据表的结果。有没有办法只显示标准 bootstrap 4 表的前 10 行？

Answer 1

您似乎还没有在 HTML 文件中导入 Jquery。 您需要为数据表使用 3 个文件，如下所示

https://code.jquery.com/jquery-3.3.1.js
https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js

但你只添加了

https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js

之前导入JQuery

jquery.dataTables.min.js and
dataTables.bootstrap4.min.js

导入js和jquery文件后 编写你的 Jquery 代码

<script>
   $(document).ready(function() {
      $('#myTable').DataTable();
    });
</script>

和标题

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css
https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css

检查如下，这将正常工作。