Bootstrap 4 библиотеки Javascript с данными 2019

Я создал таблицу в bootstrap 4 и заполнил ее на своем веб-сайте данными из базы данных myphpadmin, используя php/sql. Тем не менее, я хочу использовать библиотеки javascript для реализации поиска, разбиения на страницы, следующей страницы и т. д.

Я уже пробовал множество скриптов и библиотек css, и ни один из них не работает, поэтому я начинаю думать, что может быть проблема с моим кодированием. Это показано ниже:

<!--stylesheets-->

<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel  = "sylesheet" type  = "text/css" href = "https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">

<link href = "https://fonts.googleapis.com/css?family=Dosis:300,400,700" rel = "stylesheet">
<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.7.2/css/all.css">

<link rel = "stylesheet" href = "images/font-awesome.css" >
<link rel = "stylesheet" href = "style.css">


<!--scripts-->
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src = "https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<script type  = "text/javascript" src  = "https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type  = "text/javascript" src  = "https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>

</head>

<body>

<!-- main body of webpage that will contain table of patients-->

<div class='container mt-5 pt-5'>
            <table class = "table table-striped table-bordered patientsTable" style = "width: 100%">
                <thead>
                    <tr>
                        <th scope = "col">First Name</th>
                        <th scope = "col">Surname</th>
                        <th scope = "col">DOB</th>
                        <th scope = "col">Address</th>
                        <th scope = "col">Town</th>
                        <th scope = "col">Postcode</th>
                    </tr>
                </thead>

<?php

    while($row = $result ->fetch_assoc()){
        $rowid = $row['id'];
        $firstname = $row['firstname'];
        $surname = $row ['surname'];
        $dob = $row['dob'];
        $address = $row['address'];
        $town = $row['town'];
        $postcode = $row['postcode'];


        echo"
            <tbody>
                <tr>
                    <td>$firstname</td>
                    <td>$surname </td>
                    <td>$dob</td>
                    <td>$address</td>
                    <td>$town</td>
                    <td>$postcode</td>
                    <td><a class = 'btn btn-danger' href ='patientsmedication.php?editid=$rowid'>View</a></td>
                </tr>";

    }
?>
            </tbody>
        </table>
    </div>

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

Я ищу панель поиска и другие функции, которые нужно реализовать, но на данный момент это просто таблица с информацией из базы данных. Любая помощь будет с благодарностью оценена, так как я потратил полдня на изучение этой небольшой проблемы.

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Symfony Station Communiqué - 7 июля 2023 г
Symfony Station Communiqué - 7 июля 2023 г
Это коммюнике первоначально появилось на Symfony Station .
Оживление вашего приложения Laravel: Понимание режима обслуживания
Оживление вашего приложения Laravel: Понимание режима обслуживания
Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...
Установка и настройка Nginx и PHP на Ubuntu-сервере
Установка и настройка Nginx и PHP на Ubuntu-сервере
В этот раз я сделаю руководство по установке и настройке nginx и php на Ubuntu OS.
Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
Как установить PHP на Mac
Как установить PHP на Mac
PHP - это популярный язык программирования, который используется для разработки веб-приложений. Если вы используете Mac и хотите разрабатывать...
0
0
534
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Во-первых, кажется, что вы дважды загрузили jQuery в свой код. Вы должны удалить любой из следующих:

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src = "https://code.jquery.com/jquery-3.3.1.min.js"></script>

Также вы делаете tbody несколько раз, чего вам следует избегать и держать tbody вне цикла, как показано ниже:

<?php
    echo '<tbody>';
    while($row = $result ->fetch_assoc()){
        $rowid = $row['id'];
        $firstname = $row['firstname'];
        $surname = $row ['surname'];
        $dob = $row['dob'];
        $address = $row['address'];
        $town = $row['town'];
        $postcode = $row['postcode'];


        echo"
                <tr>
                    <td>$firstname</td>
                    <td>$surname </td>
                    <td>$dob</td>
                    <td>$address</td>
                    <td>$town</td>
                    <td>$postcode</td>
                    <td><a class = 'btn btn-danger' href ='patientsmedication.php?editid=$rowid'>View</a></td>
                </tr>";

    }
?>
</tbody>

Кроме того, у вас есть 6 столбцов в таблице thead, но вы заполняете 7 столбцов в tbody, что нарушит ваш код HTML и jQuery. Вам нужно либо указать 7 столбцов в thead, либо удалить 1 столбец из tbody.

Надеюсь, это поможет вам!!

спасибо за ваш быстрый ответ и за то, что нашли время, чтобы ответить, но я внес все вышеупомянутые изменения, и он все еще не применил желаемые изменения

kmcs87 19.05.2019 18:18

Можете ли вы создать jsfiddle для этого или показать консоль, если есть какая-либо ошибка?

Rohit Mittal 19.05.2019 18:19

теперь работает спасибо. У меня есть функция onclick с ajax, и при нажатии на таблицу появляется, но мне нужно нажать на кнопку во второй раз, чтобы появилась панель поиска и т. д. Я знаю, что это другой вопрос, поэтому я не ожидаю ответа, это то, что я изучу. Еще раз большое спасибо за вашу помощь

kmcs87 19.05.2019 19:45

Другие вопросы по теме