DataTable does not work with Bootstrap 5 dependency
DataTable does not work with Bootstrap 5 dependency
MHV
Posts: 2Questions: 1Answers: 0
The third time is the charm, hopefully, I'll be able to post a question. I got a problem with Bootstrap 5 and Datatables. The dependency that is added for Datatables ruins the rest of the design with Bootstrap 5. If I remove the Datatable dependency, it magically works normally again. How can I fix this issue? Sorry for my ignorance, frontend is not my strong point at all.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Stylesheet & Bootstrap --->
<link rel="stylesheet" href="../stylesheet/stylesheet.css">
<link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.min.css">
<!-- DataTables dependency --->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<title>Title</title>
</head>
<body class="bg-light">
<nav class="navbar navbar-expand-lg navbar-dark py-3 bg-dark">
<a class="navbar-brand fs-3" href="#">PHP project</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav fs-5">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
</nav>
<!---DataTable implementation--->
<div class="container">
<table id="userInformation" class="table table-striped table-bordered" style="width:100%">
<!--- Innholdet over table --->
<thead>
<tr>
<td>ID</td>
<td>Name</td>
<td>Address</td>
<td>School</td>
</tr>
</thead>
<?php
while ($row = mysqli_fetch_array($result)) {
echo '
<tr>
<td>'.$row["id"].'</td>
<td>'.$row["name"].'</td>
<td>'.$row["address"].'</td>
<td>'.$row["school"].'</td>
</tr>
';
}
?>
</table>
</div>
</body>
</html>
<!--- JavaScript(?) for DataTables--->
<script>
$(document).ready(function(){
$('#userInformation').DataTable(
);
});
</script>
This question has an accepted answers - jump to answer
Answers
I'm not sure what Bootstrap version line 10 is loading:
../lib/bootstrap/css/bootstrap.min.css.In your "Datatables dependency" section you are loading Bootstrap 3 CSS (
3.3.6/css/bootstrap.min.css) and the Datatables styling for Bootstrap 3.You will probably want to remove line 16 assuming line 10 is Bootstrap 5. Use the Download Builder to get the proper files for the Bootstrap 5 styling.
Kevin
Thanks a lot for the help. I got the "downloads/links" from an older project that used Datatables. The
../lib/bootstrap/css/bootstrap.min.cssis a local Bootstrap 5 download because of bad internet. Thanks again, you're a lifesaver