Я создал таблицу в 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>
Я ищу панель поиска и другие функции, которые нужно реализовать, но на данный момент это просто таблица с информацией из базы данных. Любая помощь будет с благодарностью оценена, так как я потратил полдня на изучение этой небольшой проблемы.
Во-первых, кажется, что вы дважды загрузили 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
.
Надеюсь, это поможет вам!!
Можете ли вы создать jsfiddle для этого или показать консоль, если есть какая-либо ошибка?
теперь работает спасибо. У меня есть функция onclick с ajax, и при нажатии на таблицу появляется, но мне нужно нажать на кнопку во второй раз, чтобы появилась панель поиска и т. д. Я знаю, что это другой вопрос, поэтому я не ожидаю ответа, это то, что я изучу. Еще раз большое спасибо за вашу помощь
спасибо за ваш быстрый ответ и за то, что нашли время, чтобы ответить, но я внес все вышеупомянутые изменения, и он все еще не применил желаемые изменения