From 1994e19d08b91345270a4b54952d1747a25ef9e3 Mon Sep 17 00:00:00 2001
From: 3thernitydev <3thernitydev@gmail.com>
Date: Tue, 22 Oct 2024 15:27:26 +0400
Subject: [PATCH] make a beautifull tables with datatables

---
 Hoarau-Julien/exo-1/index.html | 16 ++++++++++++++--
 Hoarau-Julien/exo-1/liste.html | 23 ++++++++++++++++++++++-
 2 files changed, 36 insertions(+), 3 deletions(-)
diff --git a/Hoarau-Julien/exo-1/index.html b/Hoarau-Julien/exo-1/index.html
index 7c2cb01..abe42d8 100644
--- a/Hoarau-Julien/exo-1/index.html
+++ b/Hoarau-Julien/exo-1/index.html
@@ -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"
diff --git a/Hoarau-Julien/exo-1/liste.html b/Hoarau-Julien/exo-1/liste.html
index 4e7d16a..733cd03 100644
--- a/Hoarau-Julien/exo-1/liste.html
+++ b/Hoarau-Julien/exo-1/liste.html
@@ -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>
