Почему моя опция записей данных, окно поиска и кнопки на странице дезорганизованы? - PullRequest
Новая
       1

Почему моя опция записей данных, окно поиска и кнопки на странице дезорганизованы?

0 голосов
/ 03 декабря 2018

Я хотел бы знать, может ли кто-нибудь помочь мне с адаптивной таблицей данных, которую я создаю для веб-сайта.Я создавал его с помощью Bootstrap 4. Я собираюсь показать код главы сайта здесь, потому что я предполагаю, что здесь есть ошибка, так как сам Datatable в порядке, и только окно поиска, кнопки страниц иопция ввода полностью не в том месте, где они должны быть.Поэтому я хотел бы помочь с этими элементами.Не могли бы вы увидеть, есть ли какие-либо проблемы с:

  • Окно поиска
  • Кнопки страницы
  • Параметры

Если вы видите какие-либодругая ошибка в моем "головном" коде, и вы хотели бы рассказать мне об этом, я был бы признателен.Спасибо всем. 

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

1 Ответ

0 голосов
/ 19 декабря 2018

Я отвечаю на свой вопрос, так как сам уже решил его, и полагаю, что он может помочь другим людям.

Проблема, почему Datatable не работал (отображается) правильно было из-за неправильного форматирования кода "head".

Код должен быть отформатирован следующим образом: 

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

Ошибка состояла просто в том, что версия Bootstrap, которая использовалась для создания отзывчивого Datable, не была указана в коде.Если вы посмотрите на «головной» код в вопросе, Javascript и CSS-файлы Datatable включены в него, но для «общего 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, то есть 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 и у вас возникла похожая проблема, попробуйте это решение.

Кроме того, в коде «head» в вопросе есть два файла «jquery», в которых нет необходимости.В ответе здесь вы можете увидеть, что есть только один (jquery 3.3.1), javascript и CSS-файлы Bootstrap, а также javascript и CSS для Datatable (указывающие версию Bootstrap, которая использовалась для созданияDatatable, который является версией 4).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...