make a beautifull tables with datatables

This commit is contained in:
3thernitydev
2024-10-22 15:27:26 +04:00
parent 412f62192a
commit 1994e19d08
2 changed files with 36 additions and 3 deletions
+14 -2
View File
@@ -13,8 +13,14 @@
<title>EXPERTNET | CDA8 EXO1</title>
</head>
<body class="bg-dark">
<div class="position-relative bg-light d-flex align-items-center justify-content-center position-absolute top-50 start-50 translate-middle w-50 rounded p-5 flex-column">
<img src="https://expernet.re/wp-content/themes/tm-bootstrap/images/logo.png" alt="logo-expernet" class="m-bottom-1">
<div
class="position-relative bg-light d-flex align-items-center justify-content-center position-absolute top-50 start-50 translate-middle w-50 rounded p-5 flex-column"
>
<img
src="https://expernet.re/wp-content/themes/tm-bootstrap/images/logo.png"
alt="logo-expernet"
class="m-bottom-1"
/>
<form>
<h1 class="h3 mb-3 fw-normal">Connexion</h1>
@@ -43,6 +49,12 @@
</form>
</div>
</body>
<!-- CDN JQUERY -->
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+22 -1
View File
@@ -10,6 +10,7 @@
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
<!-- CDN FONTAWESOME -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
@@ -17,6 +18,11 @@
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<!-- CDN DATATABLES -->
<link
rel="stylesheet"
href="https://cdn.datatables.net/2.1.8/css/dataTables.bootstrap5.min.css"
/>
<title>EXPERTNET | CDA8 EXO1</title>
</head>
<header class="w-100 bg-light">
@@ -46,7 +52,7 @@
</header>
<body class="container-fluid bg-dark">
<h1 class="text-center text-white">Liste des élèves de CDA 8</h1>
<table class="table rounded p-5">
<table class="display bg-light" id="testtab">
<thead>
<tr>
<th>Nom</th>
@@ -117,9 +123,24 @@
</tbody>
</table>
</body>
<!-- CDN JQUERY -->
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"
></script>
<!-- CDN BOOTSTRAP -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
<!-- CDN DATATABLES -->
<script src="https://cdn.datatables.net/2.1.8/js/dataTables.min.js"></script>
<script src="https://cdn.datatables.net/2.1.8/js/dataTables.bootstrap5.min.js"></script>
<script>
$(document).ready(function () {
$("#testtab").DataTable();
});
</script>
</html>