时间戳

首页 > 解决方案 > 为什么我的数据表条目选项、搜索框和页面按钮杂乱无章？

html - 为什么我的数据表条目选项、搜索框和页面按钮杂乱无章？

问题描述

我想知道是否有人可以帮助我处理我为网站创建的响应式数据表。我一直在用 Bootstrap 4 创建它。我将在这里显示网站负责人的代码，因为我猜错误就在那里，因为 Datatable 本身很好，只有搜索框、页面按钮和条目选项完全不在他们应该在的地方。所以我想要一些专门针对这些元素的帮助。你能看看有没有问题：

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

<!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>

标签： htmldatabasebootstrap-4

解决方案

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

数据表无法正常工作（显示）的问题实际上是由于“头部”代码格式错误。

代码的格式应该是这样的：

<!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">

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

<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)。

推荐阅读