Sar_Tron/Bidule
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make a beautifull tables with datatables

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
Hoarau-Julien/exo-1/index.html
+14 -2
View File
@@ -13,8 +13,14 @@
<title>EXPERTNET | CDA8 EXO1</title> <title>EXPERTNET | CDA8 EXO1</title>
</head> </head>
<body class="bg-dark"> <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"> <div
<img src="https://expernet.re/wp-content/themes/tm-bootstrap/images/logo.png" alt="logo-expernet" class="m-bottom-1"> 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> <form>
<h1 class="h3 mb-3 fw-normal">Connexion</h1> <h1 class="h3 mb-3 fw-normal">Connexion</h1>
@@ -43,6 +49,12 @@
</form> </form>
</div> </div>
</body> </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 <script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
Hoarau-Julien/exo-1/liste.html
+22 -1
View File
@@ -10,6 +10,7 @@
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous" crossorigin="anonymous"
/> />
<!-- CDN FONTAWESOME -->
<link <link
rel="stylesheet" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
@@ -17,6 +18,11 @@
crossorigin="anonymous" crossorigin="anonymous"
referrerpolicy="no-referrer" 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> <title>EXPERTNET | CDA8 EXO1</title>
</head> </head>
<header class="w-100 bg-light"> <header class="w-100 bg-light">
@@ -46,7 +52,7 @@
</header> </header>
<body class="container-fluid bg-dark"> <body class="container-fluid bg-dark">
<h1 class="text-center text-white">Liste des élèves de CDA 8</h1> <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> <thead>
<tr> <tr>
<th>Nom</th> <th>Nom</th>
@@ -117,9 +123,24 @@
</tbody> </tbody>
</table> </table>
</body> </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 <script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous" crossorigin="anonymous"
></script> ></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> </html>