Bootstrap 4 датируемые библиотеки Javascript 2019 - PullRequest
Новая
       12

Bootstrap 4 датируемые библиотеки Javascript 2019

0 голосов
/ 19 мая 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>

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

1 Ответ

0 голосов
/ 19 мая 2019

Во-первых, кажется, что вы дважды загрузили 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.

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

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

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

...