Question

我想知道是否有人可以帮助我处理我为网站创建的响应式数据表。我一直在用Bootstrap 4创建它。我将在此处显示网站标题的代码，因为我猜这里有错误，因为Datatable本身很好，只有搜索框，页面按钮和entry选项完全不在应有的位置。因此，我希望对这些元素提供一些帮助。你能看看是否有任何问题吗？

搜索框
页面按钮
选项

如果您在我的“头”代码中发现其他任何错误，并且想告诉我，我将不胜感激。谢谢大家。

<!DOCTYPE html>
<html lang="cz">
    <head>
        <title> Semestrální projekt (měnit)</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="js/jquery-3.3.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('.carousel').carousel({
                interval: 3000
                })
            });
        </script>
        <script>
        $(document).ready(function() {
        $('#tabulka').DataTable();
        } );
        </script>
        <script src="DataTables-1.10.18/js/jquery.dataTables.min.js"></script>
        <script src="DataTables-1.10.18/js/dataTables.bootstrap.js"></script>
        <link rel="stylesheet" href="DataTables-1.10.18/css/dataTables.bootstrap.css" type="text/css">
        <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
        <link rel="stylesheet" href="css/styl2.css" type="text/css">
    </head>

Answer 1

我正在回答自己的问题，因为我已经自己解决了这个问题，我想它可能会对其他人有所帮助。

为什么数据表不能正常工作（显示）的问题实际上是由于“头”代码格式错误造成的。

代码应采用以下格式：

<!DOCTYPE html>
<html lang="cz">
    <head>
        <title>Semestrální projekt</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="js/jquery-3.3.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function()
            {
            $('.carousel').carousel({
            interval: 3000
            })
            });
        </script>
        <script src="DataTables-1.10.18/js/jquery.dataTables.min.js"></script>
        <script>
            $(document).ready(function()
            {
            $('#tabulka').DataTable();
            });
        </script>
        <script src="DataTables-1.10.18/js/dataTables.bootstrap4.min.js"></script>
        <link rel="stylesheet" href="DataTables-1.10.18/css/dataTables.bootstrap4.min.css" type="text/css">
        <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
        <link rel="stylesheet" href="css/styl.css" type="text/css">
    </head>

错误仅仅是因为代码中未指定用于创建响应式Datable的Bootstrap版本。如果您查看问题中的“ head”代码，则其中包含Datatable的Javascript和CSS文件，但包含“通用Bootstrap”（请说）。像这样：

<script src="DataTables-1.10.18/js/dataTables.bootstrap.js"></script>
        <link rel="stylesheet" href="DataTables-1.10.18/css/dataTables.bootstrap.css" type="text/css">

如果您在答案中查看“头”代码，则已经指定了正在使用的Bootstrap版本，即Bootstrap4。请参见以下代码的特定部分：

<script src="DataTables-1.10.18/js/dataTables.bootstrap4.min.js"></script>
        <link rel="stylesheet" href="DataTables-1.10.18/css/dataTables.bootstrap4.min.css" type="text/css">

在这种情况下，这解决了问题。如果您使用Bootstrap 4，并且遇到类似的问题，请尝试此解决方案。

此外，在问题的“头”代码中，有两个“ jquery”文件，这不是必需的。在这里的答案中，您可能会看到只有一个（jQuery 3.3.1），Bootstrap的javascript和CSS文件以及Datatable的javascript和CSS（指定用于创建Bootstrap的版本）数据表（版本4）。

数据表：杂乱无章的条目选项，搜索框和页面按钮

1 个答案: