From 730b94ebe44a8a66b3dd53927699db1081251940 Mon Sep 17 00:00:00 2001
From: KONE SOREL <skone@ebene.info>
Date: Thu, 25 Dec 2025 12:15:36 +0000
Subject: [PATCH] Correction DataTable

---
 Js/fonctions.js       | 100 ++++++++++++++++++++----------------------
 Vue/Accueil/index.php |  31 +++++++------
 Vue/gabarit.php       |   2 +-
 3 files changed, 64 insertions(+), 69 deletions(-)

diff --git a/Js/fonctions.js b/Js/fonctions.js
index 16e2131..5873c1d 100755
--- a/Js/fonctions.js
+++ b/Js/fonctions.js
@@ -379,61 +379,57 @@ function appliquerDataTable() {
     const $table = $('.tabliste');
     const codeLangue = $("#codeLangue").val();
 
-    // Détruire l'instance existante si elle existe
-    if ($.fn.DataTable.isDataTable($table)) {
-        $table.DataTable().destroy();
-        $table.empty(); // Optionnel
-    }
+    // Dictionnaire des traductions
+    const translations = {
+        en_US: {
+            lengthMenu: "Display _MENU_ records per page",
+            zeroRecords: "Nothing found - sorry",
+            info: "Showing page _PAGE_ of _PAGES_",
+            infoEmpty: "No records available",
+            search: "Search:",
+            paginate: {
+                next: "►",
+                previous: "◄",
+                first: "|◄",
+                last: "►|"
+            },
+            infoFiltered: "(filtered from _MAX_ total records)"
+        },
+        fr_FR: {
+            lengthMenu: "Affiche _MENU_ par page",
+            zeroRecords: "Désolé - Aucune donnée trouvée",
+            info: "_PAGE_ sur _PAGES_ pages",
+            infoEmpty: "Pas d'enregistrement",
+            search: "Recherche:",
+            paginate: {
+                next: "►",
+                previous: "◄",
+                first: "|◄",
+                last: "►|"
+            },
+            infoFiltered: "(filtré de _MAX_ total enregistrements)"
+        }
+    };
+
+    // Options DataTable
+    const options = {
+        destroy: true,
+        responsive: true,
+        order: [[0, "desc"]],
+        lengthMenu: [50, 100, 150],
+        pagingType: "full_numbers",
+        autoWidth: false,
+        language: translations[codeLangue] || translations.fr_FR
+    };
 
     try {
-        // Dictionnaire des traductions
-        const translations = {
-            en_US: {
-                lengthMenu: "Display _MENU_ records per page",
-                zeroRecords: "Nothing found - sorry",
-                info: "Showing page _PAGE_ of _PAGES_",
-                infoEmpty: "No records available",
-                search: "Search:",
-                paginate: {
-                    next: "►",
-                    previous: "◄",
-                    first: "|◄",
-                    last: "►|"
-                },
-                infoFiltered: "(filtered from _MAX_ total records)"
-            },
-            fr_FR: {
-                lengthMenu: "Affiche _MENU_ par page",
-                zeroRecords: "Désolé - Aucune donnée trouvée",
-                info: "_PAGE_ sur _PAGES_ pages",
-                infoEmpty: "Pas d'enregistrement",
-                search: "Recherche:",
-                paginate: {
-                    next: "►",
-                    previous: "◄",
-                    first: "|◄",
-                    last: "►|"
-                },
-                infoFiltered: "(filtré de _MAX_ total enregistrements)"
-            }
-            // ➕ Tu peux ajouter d'autres langues ici (ex: es_ES, de_DE, etc.)
-        };
+        // Initialisation
+        const instance = $table.DataTable(options);
 
-        // Options communes
-        const options = {
-            destroy: true,
-            responsive: true,
-            order: [[0, "desc"]],
-            lengthMenu: [50, 100, 150],
-            scrollX: true,
-            scrollY: "75vh",
-            pagingType: "full_numbers",
-            autoWidth: false,
-            language: translations[codeLangue] || translations.fr_FR
-        };
-
-        // Initialisation du DataTable
-        $table.DataTable(options);
+        // Correction d'alignement après le rendu
+        setTimeout(() => {
+            instance.columns.adjust().responsive.recalc();
+        }, 100);
 
     } catch (err) {
         console.error("Erreur lors de l'application du DataTable :", err);
diff --git a/Vue/Accueil/index.php b/Vue/Accueil/index.php
index 270fcc9..ee7eb34 100644
--- a/Vue/Accueil/index.php
+++ b/Vue/Accueil/index.php
@@ -75,24 +75,23 @@
                     <i class="accordion-icon bi bi-chevron-down"></i>
                 </h2>
                 <div class="accordion-content">
-                    <div class="tab-container">
-                        <table class="table table-striped table-bordered table-hover table-condensed table-responsive tabliste compact" style="font-size:10pt; white-space:nowrap;">
+                    <div class="table-responsive">
+                        <table class="table table-striped table-bordered table-hover table-condensed tabliste compact w-100" style="font-size:10pt; white-space:nowrap;">
                             <thead>
-                            <tr>
-                                <th style='text-align:center'> <?= _("No Police") ?> </th>
-                                <th style='text-align:center'> <?= _("ID Police") ?> </th>
-                               
-                                <th style='text-align:center'>Type</th>
-                                <th style='text-align:center'> <?= _("Effet") ?> </th>
-                                <th style='text-align:center'> <?= _("Echéance") ?> </th>
-                               
-                                <th style='text-align:center'> <?= _("Type Avenant") ?> </th>
-                                <th style='text-align:center'> <?= _("Etat") ?> </th>
-                                <th style='text-align:center'> <?= _("Prime") ?> </th>
-                                <th style='text-align:center'> <?= _("Sinitres") ?> </th>
-                                <th style='text-align:center'> <?= _("R S/P") ?> </th>
-                            </tr>
+                                <tr>
+                                    <th style="text-align:center"> <?= _("No Police") ?> </th>
+                                    <th style="text-align:center"> <?= _("ID Police") ?> </th>
+                                    <th style="text-align:center">Type</th>
+                                    <th style="text-align:center"> <?= _("Effet") ?> </th>
+                                    <th style="text-align:center"> <?= _("Échéance") ?> </th>
+                                    <th style="text-align:center"> <?= _("Type Avenant") ?> </th>
+                                    <th style="text-align:center"> <?= _("État") ?> </th>
+                                    <th style="text-align:center"> <?= _("Prime") ?> </th>
+                                    <th style="text-align:center"> <?= _("Sinistres") ?> </th>
+                                    <th style="text-align:center"> <?= _("R S/P") ?> </th>
+                                </tr>
                             </thead>
+
                             <tbody>
                                 <?php foreach ($polices as $police):
                                     $id = $this->nettoyer($police['idPolice']);
diff --git a/Vue/gabarit.php b/Vue/gabarit.php
index 1aaa92f..5abe5d6 100755
--- a/Vue/gabarit.php
+++ b/Vue/gabarit.php
@@ -594,7 +594,7 @@ console.groupEnd();
         <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 
         <!-- Application Scripts -->
-        <script src="/Js/fonctions.js?ver=2025.12.25.00"></script>
+        <script src="/Js/fonctions.js?ver=2025.12.25.01"></script>
 
         <?php if (est_anglophone()): ?>
             <script src="/Js/datepicker-eng.js"></script>