实现 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 和
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

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