IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

récupérer le bon n° de ligne


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Janvier 2024
    Messages
    23
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux

    Informations forums :
    Inscription : Janvier 2024
    Messages : 23
    Points : 12
    Points
    12
    Par défaut récupérer le bon n° de ligne
    Bonjour

    j'ai fait une page web de gestion de licences:
    Code PHP : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    // Requête SQL pour récupérer les données de la table Inventaire
        $sql_inventaire = "SELECT ID, AnneeCommande, ServiceCommanditaire, UtilisateurCommanditaire, Acheteur, NumBC, NumTicketCommande, TypeIns, NomLogiciel, VersLogiciel, NumDeSerie, CleLicence, EnvSystem, DateDebAbon, DateFinAbon, NbAchetes, RepDepLogWin, RepDepLogMAC, RepDepProc, CheminFichiersLicences, Commentaires
                FROM InventaireAbon";
     
        // Exécution de la requête
        $stmt_inventaire = $pdo->query($sql_inventaire);
     
        // Récupération des résultats
        $rows_inventaire = $stmt_inventaire->fetchAll();
     
        // Initialisation du compteur de lignes
        $rowNum = 1;
     
        // Affichage des résultats sous forme de tableau
        echo "<div class='table-conteneur'>";
        echo "<table class='table-scrollable'>";
        echo "<thead>";
        echo "<tr><th>N°</th><th>Année de commande</th><th>Service Commanditaire</th><th>Utilisateur Commanditaire</th><th>Acheteur</th><th>Numéro de Bon de Commande</th><th>Numéro de Ticket de Commande</th><th>Type d'installation</th><th>Nom du Logiciel</th><th>Version du Logiciel</th><th>Numéro de Série</th><th>Clé de Licence</th><th>Environnement du Système</th><th>Date de début de l'abonnement</th><th>Date de fin de l'abonnement</th><th>Nombre Acheté</th><th>Nombre Attribué</th><th>Depot logiciel Windows</th><th>Depot logiciel MAC</th><th>Chemin des Fichiers de Licence</th><th>Procédures</th><th>Commentaires</th></tr>";
        echo "</thead>";
        echo "<tbody>";
     
    // Affichage des données
    foreach ($rows_inventaire as $row) {
        echo "<tr>";
        // Affichage du numéro de ligne
        echo "<td>" . htmlspecialchars($row['ID']) . "</td>";
        echo "<td>" . htmlspecialchars($row['AnneeCommande']) . "</td>";	
        echo "<td>" . htmlspecialchars($row['ServiceCommanditaire']) . "</td>";
        echo "<td>" . htmlspecialchars($row['UtilisateurCommanditaire']) . "</td>";
        echo "<td>" . htmlspecialchars($row['Acheteur']) . "</td>";
        echo "<td>" . htmlspecialchars($row['NumBC']) . "</td>";
        echo "<td>" . htmlspecialchars($row['NumTicketCommande']) . "</td>";
    	echo "<td>" . htmlspecialchars($row['TypeIns']) . "</td>";
        echo "<td>" . htmlspecialchars($row['NomLogiciel']) . "</td>";
        echo "<td>" . htmlspecialchars($row['VersLogiciel']) . "</td>";
        echo "<td>" . htmlspecialchars($row['NumDeSerie']) . "</td>";
        echo "<td>" . htmlspecialchars($row['CleLicence']) . "</td>";
        echo "<td>" . htmlspecialchars($row['EnvSystem']) . "</td>";
        echo "<td>" . htmlspecialchars($row['DateDebAbon']) . "</td>";
        echo "<td>" . htmlspecialchars($row['DateFinAbon']) . "</td>";		
        echo "<td>" . htmlspecialchars($row['NbAchetes']) . "</td>";
     
        // Affichage du nombre attribué pour la clé de licence
        $cleLicence = htmlspecialchars($row['CleLicence']);
        if (isset($installations[$cleLicence])) {
            $nombreAttribue = $installations[$cleLicence];
        } else {
            $nombreAttribue = 0;
        }
        // Appliquer un style différent à la colonne en fonction de la condition
        $nombreAchete = intval($row['NbAchetes']);
        $styleColonne = ($nombreAttribue > $nombreAchete) ? "background-color: red;" : "background-color: #add8e6;"; // Vert clair
        echo "<td style='$styleColonne'>" . $nombreAttribue . "</td>";
     
    	// Vérification du téléchargement disponible pour la colonne RepDepLogWin
    	echo "<td>";
    		if (!empty($row['RepDepLogWin'])) {
        echo "<span style='color: green;'>Téléchargement disponible</span>";
    		} else {
        echo "<span style='color: red;'>Téléchargement indisponible</span>";
    	}
    	echo "</td>";
     
    	// Vérification du téléchargement disponible pour la colonne RepDepLogMAC
    	echo "<td>";
    		if (!empty($row['RepDepLogMAC'])) {
        echo "<span style='color: green;'>Téléchargement disponible</span>";
    		} else {
        echo "<span style='color: red;'>Téléchargement indisponible</span>";
    		}
    	echo "</td>";
     
    	// Vérification du téléchargement disponible pour la colonne RepDepProc
    	echo "<td>";
    		if (!empty($row['RepDepProc'])) {
        echo "<span style='color: green;'>Téléchargement disponible</span>";
    		} else {
        echo "<span style='color: red;'>Téléchargement indisponible</span>";
    	}
    	echo "</td>";	
     
    	// Vérification du téléchargement disponible pour la colonne CheminFichiersLicences
    	echo "<td>";
    		if (!empty($row['CheminFichiersLicences'])) {
        echo "<span style='color: green;'>Téléchargement disponible</span>";
    		} else {
        echo "<span style='color: red;'>Téléchargement indisponible</span>";
    	}
    	echo "</td>";	
     
    	//Commentaire
        echo "<td>" . htmlspecialchars($row['Commentaires']) . "</td>";
        echo "</tr>";
    }
        echo "</tbody>";
        echo "</table>";
        echo "</div>";
     
    } catch (PDOException $e) {
        // En cas d'erreur de connexion ou d'exécution de la requête
        echo "Erreur : " . $e->getMessage();
    }
    ?>

    Qui fonctionne très bien

    Avec une fonction de trie qui fonctionne bien aussi et trie bien les n° de ligne en même temps les lignes elles même...

    Problème

    Quand je fais un clic droit pour modifier la ligne, je ne récupére pas l'ID de la base SQL express et donc son n° dans la base mais son n° de position de ligne dans le tableau :/

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    // Bloc de fonction pour trie
    // Attacher la fonction de tri lors du clic sur l'en-tête de colonne
    document.querySelectorAll('.table-scrollable thead th').forEach(function(header, index) {
        header.addEventListener("click", function() {
            trierTableau(index);
        });
    });
     
    // Fonction pour trier le tableau
    function trierTableau(columnIndex) {
        var table, rows, switching, i, x, y, shouldSwitch;
        table = document.querySelector('.table-scrollable tbody');
        switching = true;
     
        while (switching) {
            switching = false;
            rows = table.rows;
            for (i = 0; i < (rows.length - 1); i++) {
                shouldSwitch = false;
                x = rows[i].getElementsByTagName("td")[columnIndex];
                y = rows[i + 1].getElementsByTagName("td")[columnIndex];
                if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                    shouldSwitch = true;
                    break;
                }
            }
            if (shouldSwitch) {
                rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                switching = true;
            }
        }
    } // // Fin de bloc de fonction pour trie
    j'ai essayé pleins de chose mais rien ne fonctionne

    merci pour votre aide

  2. #2
    Membre averti Avatar de ASCIIDEFOND
    Homme Profil pro
    Autodidacte passionné
    Inscrit en
    Novembre 2002
    Messages
    235
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Autodidacte passionné

    Informations forums :
    Inscription : Novembre 2002
    Messages : 235
    Points : 439
    Points
    439
    Par défaut
    Salut draidius,

    Un exemple pour récupérer la valeur d'une cellule après un click sur cette dernière.

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    table = document.querySelector('.table-scrollable tbody');
     
    table.nextElementSibling.childNodes.forEach((trSelect) => {
        trSelect.addEventListener('click', (e) => {
            console.log(e.target.innerText) //Cellule cliquée
            console.log(trSelect.textContent) // La ligne complète
            console.log(trSelect.children[0].innerText) //La première cellule de la ligne
        })
    })
    })

  3. #3
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 428
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 428
    Points : 4 910
    Points
    4 910
    Par défaut
    Bonjour,

    Citation Envoyé par draidius Voir le message
    Quand je fais un clic droit pour modifier la ligne, je ne récupére pas l'ID de la base SQL express et donc son n° dans la base mais son n° de position de ligne dans le tableau :/
    Pourquoi ne pas attribuer un data-id="<?=$row['ID']?>" aux <tr> générés par la boucle foreach, et vous obtenez le id avec JS dataset.id ?

    Sinon, voilà deux exemples qui permetnt de trier (asc/desc) les lignes du tableau en fonction de la colonne cliquée
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <table id="t">
      <thead>
        <tr>
          <th>Col 1</th><th>Col 2</th><th>Col 3</th>
        </tr>
      </thead>
      <tbody>
       <tr>
          <td>3</td>
          <td>5</td>
          <td>9</td>
        </tr>
        <tr>
          <td>2</td>
          <td>4</td>
          <td>7</td>
        </tr>
        <tr>
          <td>1</td>
          <td>6</td>
          <td>8</td>
        </tr>
      </tbody>
    </table>

    Le premier exemple avec presque le même code actuel sauf quelques modifications
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    let t = document.getElementById("t");
    t.querySelectorAll("thead th").forEach((th, i) => {
      th.onclick = e => trierTableau(t, i);
    });
     
    function trierTableau(table, indexCol = 0) {
      let shouldSwitch, switching = true,
        rows = table.tBodies[0].rows,
        condition;
      table.dataset.order = table.dataset.order == "asc" ? "desc" : "asc";
      while (switching) {
        switching = false;
        for (i = 0; i < rows.length - 1; i++) {
          shouldSwitch = false;
          condition = (table.dataset.order == "asc" ? rows[i] : rows[i + 1])
            .cells[indexCol].textContent <
            (table.dataset.order == "asc" ? rows[i + 1] : rows[i])
            .cells[indexCol].textContent;
          if (condition) {
            shouldSwitch = true;
            break;
          }
        }
        if (shouldSwitch) {
          rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
          switching = true;
        }
      }
    }
    Et le deuxième exemple avec sort
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    let t = document.getElementById("t");
    t.querySelectorAll("thead th").forEach((th, i) => {
      th.onclick=e=>trierTableau(t, i); 
    });
     
    function trierTableau(table, indexCol = 0) {
    table.dataset.order=table.dataset.order=="asc"?"desc":"asc";
    Array.from(table.tBodies[0].rows)
        .sort((a, b) => {
    	return (table.dataset.order=="asc"?a:b)
    	.querySelectorAll("td")[indexCol].textContent
    	<(table.dataset.order=="asc"?b:a)
    	.querySelectorAll("td")[indexCol].textContent
    	?-1:1;
        })
        .map(tr => tr.parentNode.append(tr));
    }
    Voir aussi la bibliothèque DataTable qui propose d'autres fonctionnalités intéressantes comme la pagination, la recherche et le mode responsive.

  4. #4
    Membre à l'essai
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Janvier 2024
    Messages
    23
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux

    Informations forums :
    Inscription : Janvier 2024
    Messages : 23
    Points : 12
    Points
    12
    Par défaut
    Bonjour ASCIIDEFOND

    merci,

    je vais essayer de l'intégrer dans mon code existant, pour la sélection des évènements du clic droit.


  5. #5
    Membre à l'essai
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Janvier 2024
    Messages
    23
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux

    Informations forums :
    Inscription : Janvier 2024
    Messages : 23
    Points : 12
    Points
    12
    Par défaut
    Merci Toufik83

    je vais essayer les différentes approches, j'espére ne ps avoir trop de choses à modifier

    CDT

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 034
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 034
    Points : 44 406
    Points
    44 406
    Par défaut
    Bonjour,
    Citation Envoyé par draidius
    Quand je fais un clic droit pour modifier la ligne,
    pas sûr que cela soit la meilleure idée, il me semble que l'ajout d'une colonne avec un bouton edit serait plus judicieux pour l'utilisateur.



    Citation Envoyé par ASCIIDEFOND
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    table = document.querySelector('.table-scrollable tbody');
     
    table.nextElementSibling.childNodes.forEach((trSelect) => {
    comme tu utilises nextElementSibling, je pense que tu voulais plutôt partir de :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    table = document.querySelector('.table-scrollable thead');
    De plus avec les childNodes tu prends en compte les éléments enfant tr mais également les text.
    Autant peut-être partir directement en ciblant les document.querySelectorAll(".table-scrollable tbody tr").



    Citation Envoyé par Toufik83
    L'inconvénient avec sort(), c'est que vous devriez modifier totalement le contenu HTML du <tbody>,
    Pas nécessairement, il suffit non pas de modifier les contenus mais de « replacer » les lignes, comme le fait d'ailleurs draidius dans sa fonction, mais une fois la totalité du tri effectué avec, par exemple, prepend() ou append() suivant le sens de celui-ci.

  7. #7
    Membre à l'essai
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Janvier 2024
    Messages
    23
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux

    Informations forums :
    Inscription : Janvier 2024
    Messages : 23
    Points : 12
    Points
    12
    Par défaut
    @tous, merci de votre aide

    En fait j'ai pallié au problème en mettant des MDP pour ne pas que les techniciens puissent modifié une fois trié, mais dés qu je veux changer un truc, j'ai les autres fonctions qui déconnes... soit c'est le trie qui saute, les filtre ou je n'ai carrément plus de menu contextuel..
    Voici le code complet, mais c'est vrai que j'aimerais vraiment pouvoir modifier les lignes après avoir fait le trie.
    là c'est la page d'inventaire mais j'ai le même problème...

    Et d’après ce que j'ai compris pour les suppressions, de toute façon il va falloir que je ne base plus mon tableau php sur les ID mais sur les lignes de manière qu'en cas de suppression, cela ne fasse pas de "trou" dans le tableau visible par les utilisateurs

    ------------------------------------------------------------------------------------------------

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    347
    348
    349
    350
    351
    352
    353
    354
    355
    356
    357
    358
    359
    360
    361
    362
    363
    364
    365
    366
    367
    368
    369
    370
    371
    372
    373
    374
    375
    376
    377
    378
    379
    380
    381
    382
    383
    384
    385
    386
    387
    388
    389
    390
    391
    392
    393
    394
    395
    396
    397
    398
    399
    400
    401
    402
    403
    404
    405
    406
    407
    408
    409
    410
    411
    412
    413
    414
    415
    416
    417
    418
    419
    420
    421
    422
    423
    424
    425
    426
    427
    428
    429
    430
    431
    432
    433
    434
    435
    436
    437
    438
    439
    440
    441
    442
    443
    444
    445
    446
    447
    448
    449
    450
    451
    452
    453
    454
    455
    456
    457
    458
    459
    460
    461
    462
    463
    464
    465
    466
    467
    468
    469
    470
    471
    472
    473
    474
    475
    476
    477
    478
    479
    480
    481
    482
    483
    484
    485
    486
    487
    488
    489
    490
    491
    492
    493
    494
    495
    496
    497
    498
    499
    500
    501
    502
    503
    504
    505
    506
    507
    508
    509
    510
    511
    512
    513
    514
    515
    516
    517
    518
    519
    520
    521
    522
    523
    524
    525
    526
    527
    528
    529
    530
    531
    532
    533
    534
    535
    536
    537
    538
    539
    540
    541
    542
    543
    544
    545
    546
    547
    548
    549
    550
    551
    552
    553
    554
    555
    556
    557
    558
    559
    560
    561
    562
    563
    564
    565
    566
    567
    568
    569
    570
    571
    572
    573
    574
    575
    576
    577
    578
    579
    580
    581
    582
    583
    584
    585
    586
    587
    588
    589
    590
    591
    592
    593
    594
    595
    596
    597
    598
    599
    600
    601
    602
    603
    604
    605
    606
    607
    608
    609
    610
    611
    612
    613
    614
    615
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inventaire logiciel par abonnement</title>
    <meta name="Author" content="Patrice">
    <meta name="Description" content="Réalisation d'une &lt;table&gt; scrollable, avec une colonne fixe, en pur CSS en utilisant le positionnement sticky.">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Coda%7CMontserrat&display=swap">
    <link rel="stylesheet" href="style/_css-common.css">
    <link rel="stylesheet" href="style/prism.css">
    <style id="code-css" data-role="pour effet de scroll">
    .table-conteneur {
      width: max-content;
      height: 20em;
      margin: auto;
      max-width: 100%;
      border: 1px solid #888;
      overflow: auto;
      display: block; /* Ajout de cette ligne */
    }
    .table-scrollable {
      border: 0;
      border-collapse: separate;
      border-spacing: 0;
      empty-cells: hide;
      background-color: #EFEFEF;
    }
    .table-scrollable th, .table-scrollable td {
      padding: .25em;
      border-right: 1px solid #888;
      word-break: normal;
    }
    .table-scrollable th + th, .table-scrollable td +td {
      border-left: 1px solid #FFF;
    }
    .table-scrollable thead th {
      border-top: 1px solid #FFF;
      text-shadow: 1px 1px 0 #FFF;
      white-space: nowrap;
      background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.2) )repeat scroll 0% 0% #EEE;
      position: sticky;
      top: 0;
      z-index: 2;
    }
    .table-scrollable thead th:first-child {
      left: 0;
      z-index: 3;
    }
    .table-scrollable tbody {
      border: 1px solid #888;
      border-width: 1px 0;
      background-color: #FFF;
    }
    .table-scrollable tbody td:first-child {
      background: #FFF;
      position: sticky;
      left: 0;
      z-index: 1;
    }
    .table-scrollable tbody td {
      border-top: 1px solid #CCC;
      white-space: nowrap;
    }
    .table-scrollable tbody tr:hover td {
      background-color: #DEF;
    }
    /* Ajout du style pour les cellules rouges */
    .table-scrollable tbody td.cellule-rouge {
      background-color: red;
      color: white; /* Couleur du texte */
    }
    .table-scrollable th, .table-scrollable td {
      font-size: 14px; /* Taille de la police pour les cellules du tableau */
    }
     
    .table-scrollable thead th {
      font-size: 16px; /* Taille de la police pour les en-têtes de colonnes */
    }
    </style>
    </head>
    <body>
    <main>
      <header>
        <h1>Inventaire des licences utilisateurs Logiciels par abonnements</h1>
    	 <!-- retour accueil" -->
        <a href="../../../Multi_Site_V4.html"><button style="width: 280px;">Accueil</button>
    	<a href="../InvLogFreeSiege/InvLogFreeSiege.php"><button style="width: 250px;">Attributions Logiciels gratuits</button><BR>
    	<a href="../Inventaire/Inventaire.php"><button style="width: 280px;">Inventaire des Logiciels licences permanentes</button>
    	<a href="../Attribution/Attribution.php"><button style="width: 280px;">Attributions Logiciels Licences permanentes</button><BR><BR>
        </a>	
        <!-- Première ligne -->
        <div id="first-row">
            <button id="connexionButton" style="width: 180px;">Vérification de la connexion</button>
            <input type="text" id="connexionInfo" class="connexion-info" readonly><BR><BR>
    		<button id="btnActiverGestion" style="width: 200px;">Activer la gestion de la page</button>
        </div>
      </header>
      <section>
    <h2>Inventaire</h2>
    <?php
    // Inclure le fichier de connexion
    require_once('../Connexion/connexion_sql.php');
     
    try {
        // Connexion à la base de données à l'aide de la classe Connexion
        $connexion = new Connexion();
        $pdo = $connexion->connect();
     
        // Définir le mode d'erreur PDO
        $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
     
        // Requête SQL pour récupérer les données de la table Inventaire par Abonnement
        $sql = "SELECT CleLicence, COUNT(*) AS NombreDInstallations 
                FROM AttributionAbon 
                GROUP BY CleLicence";
     
        // Exécution de la requête
        $stmt = $pdo->query($sql);
     
        // Récupération des résultats
        $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
     
        // Tableau associatif pour stocker le nombre d'installations de chaque licence
        $installations = [];
        foreach ($rows as $row) {
            $installations[$row['CleLicence']] = $row['NombreDInstallations'];
        }
        // Fin de la requête pour la récupération du nombre de licences
     
        // Requête SQL pour récupérer les données de la table Inventaire
        $sql_inventaire = "SELECT ID, AnneeCommande, ServiceCommanditaire, UtilisateurCommanditaire, Acheteur, NumBC, NumTicketCommande, TypeIns, NomLogiciel, VersLogiciel, NumDeSerie, CleLicence, EnvSystem, DateDebAbon, DateFinAbon, NbAchetes, RepDepLogWin, RepDepLogMAC, RepDepProc, CheminFichiersLicences, Commentaires
                FROM InventaireAbon";
     
        // Exécution de la requête
        $stmt_inventaire = $pdo->query($sql_inventaire);
     
        // Récupération des résultats
        $rows_inventaire = $stmt_inventaire->fetchAll();
     
        // Initialisation du compteur de lignes
        $rowNum = 1;
     
        // Affichage des résultats sous forme de tableau
        echo "<div class='table-conteneur'>";
        echo "<table class='table-scrollable'>";
        echo "<thead>";
        echo "<tr><th>N°</th><th>Année de commande</th><th>Service Commanditaire</th><th>Utilisateur Commanditaire</th><th>Acheteur</th><th>Numéro de Bon de Commande</th><th>Numéro de Ticket de Commande</th><th>Type d'installation</th><th>Nom du Logiciel</th><th>Version du Logiciel</th><th>Numéro de Série</th><th>Clé de Licence</th><th>Environnement du Système</th><th>Date de début de l'abonnement</th><th>Date de fin de l'abonnement</th><th>Nombre Acheté</th><th>Nombre Attribué</th><th>Depot logiciel Windows</th><th>Depot logiciel MAC</th><th>Chemin des Fichiers de Licence</th><th>Procédures</th><th>Commentaires</th></tr>";
        echo "</thead>";
        echo "<tbody>";
     
    // Affichage des données
    foreach ($rows_inventaire as $row) {
        echo "<tr>";
        // Affichage du numéro de ligne
        echo "<td>" . htmlspecialchars($row['ID']) . "</td>";
        echo "<td>" . htmlspecialchars($row['AnneeCommande']) . "</td>";    
        echo "<td>" . htmlspecialchars($row['ServiceCommanditaire']) . "</td>";
        echo "<td>" . htmlspecialchars($row['UtilisateurCommanditaire']) . "</td>";
        echo "<td>" . htmlspecialchars($row['Acheteur']) . "</td>";
        echo "<td>" . htmlspecialchars($row['NumBC']) . "</td>";
        echo "<td>" . htmlspecialchars($row['NumTicketCommande']) . "</td>";
            echo "<td>" . htmlspecialchars($row['TypeIns']) . "</td>";
        echo "<td>" . htmlspecialchars($row['NomLogiciel']) . "</td>";
        echo "<td>" . htmlspecialchars($row['VersLogiciel']) . "</td>";
        echo "<td>" . htmlspecialchars($row['NumDeSerie']) . "</td>";
        echo "<td>" . htmlspecialchars($row['CleLicence']) . "</td>";
        echo "<td>" . htmlspecialchars($row['EnvSystem']) . "</td>";
        echo "<td>" . htmlspecialchars($row['DateDebAbon']) . "</td>";
        echo "<td>" . htmlspecialchars($row['DateFinAbon']) . "</td>";              
        echo "<td>" . htmlspecialchars($row['NbAchetes']) . "</td>";
     
        // Affichage du nombre attribué pour la clé de licence
        $cleLicence = htmlspecialchars($row['CleLicence']);
        if (isset($installations[$cleLicence])) {
            $nombreAttribue = $installations[$cleLicence];
        } else {
            $nombreAttribue = 0;
        }
        // Appliquer un style différent à la colonne en fonction de la condition
        $nombreAchete = intval($row['NbAchetes']);
        $styleColonne = ($nombreAttribue > $nombreAchete) ? "background-color: red;" : "background-color: #add8e6;"; // Vert clair
        echo "<td style='$styleColonne'>" . $nombreAttribue . "</td>";
     
            // Vérification du téléchargement disponible pour la colonne RepDepLogWin
            echo "<td>";
                    if (!empty($row['RepDepLogWin'])) {
        echo "<span style='color: green;'>Téléchargement disponible</span>";
                    } else {
        echo "<span style='color: red;'>Téléchargement indisponible</span>";
            }
            echo "</td>";
     
            // Vérification du téléchargement disponible pour la colonne RepDepLogMAC
            echo "<td>";
                    if (!empty($row['RepDepLogMAC'])) {
        echo "<span style='color: green;'>Téléchargement disponible</span>";
                    } else {
        echo "<span style='color: red;'>Téléchargement indisponible</span>";
                    }
            echo "</td>";
            
            // Vérification du téléchargement disponible pour la colonne RepDepProc
            echo "<td>";
                    if (!empty($row['RepDepProc'])) {
        echo "<span style='color: green;'>Téléchargement disponible</span>";
                    } else {
        echo "<span style='color: red;'>Téléchargement indisponible</span>";
            }
            echo "</td>";   
            
            // Vérification du téléchargement disponible pour la colonne CheminFichiersLicences
            echo "<td>";
                    if (!empty($row['CheminFichiersLicences'])) {
        echo "<span style='color: green;'>Téléchargement disponible</span>";
                    } else {
        echo "<span style='color: red;'>Téléchargement indisponible</span>";
            }
            echo "</td>";   
            
            //Commentaire
        echo "<td>" . htmlspecialchars($row['Commentaires']) . "</td>";
        echo "</tr>";
    }
        echo "</tbody>";
        echo "</table>";
        echo "</div>";
     
    } catch (PDOException $e) {
        // En cas d'erreur de connexion ou d'exécution de la requête
        echo "Erreur : " . $e->getMessage();
    }
    ?>
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        var tableConteneur = document.querySelector('.table-conteneur');
        tableConteneur.scrollTop = tableConteneur.scrollHeight;
      });
    </script>
     
     <!-- Bouton pour afficher le nombre d'entrées trouvées -->
    <BR><button id="bouton-entrees-trouvees" style="width: 180px;">Nombre d'entrées trouvées</button>
    <input type="text" id="Inforesultat" class="resultat-filtres" readonly>
     
       <h3>Gestion du tableau</h3>
        <div id="second-row">
            <button id="ajouterLogicielButton" style="width: 180px;">Ajouter Logiciel</button>
            <button id="MAJLigneButton" style="width: 180px;">mettre à jour une ligne</button>
            <button id="SupLigneButton" style="width: 180px;">Supprimer une entrée</button>
        </div>
      </section>
      <footer class="licence">
        <p>Autres Boutons</p>
        <!-- Bouton "Gestion des licences" -->
        <a href="../../Siege/AttributionAbon/Attribution.php">
            <button style="width: 150px;">Attribution</button><BR><BR>
        </a>	
    	<a href="../../Siege/InventaireAbon/Import_Export/SavTableAttribution.php">
    		<button id="export-btn">Exporter les données</button>
    	</a>
      </footer>
     <!-- Menu contextuel -->
      <div id="contextMenu" style="display: none; position: absolute; background-color: #f9f9f9; border: 1px solid #ccc; min-width: 120px; z-index: 1;">
        <ul style="list-style-type: none; margin: 0; padding: 0;">
    		<li id="copyOptionClicDroit" style="padding: 8px 12px; cursor: pointer;">Copier</li>
    		<li id="updateOptionClicDroit" style="padding: 8px 12px; cursor: pointer;">Mise à jour</li>
    		<li id="deleteOptionClicDroit" style="padding: 8px 12px; cursor: pointer;">Suppression</li>
        </ul>
      </div>
    </main>
     
    <script src="Js/contextMenu.js"></script>
    <script>
        // Script JavaScript pour envoyer une requête au serveur
        document.getElementById("connexionButton").addEventListener("click", function() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("connexionInfo").value = "Connexion OK";
                    document.getElementById("connexionInfo").style.color = "green"; // Couleur verte pour indiquer une connexion réussie
                } else if (this.readyState == 4) {
                    document.getElementById("connexionInfo").value = "Connexion échouée";
                    document.getElementById("connexionInfo").style.color = "red"; // Couleur rouge pour indiquer une connexion échouée
                }
            };
            xhttp.open("GET", "../Connexion/connexion_sql.php", true); // Le fichier PHP de connexion
            xhttp.send();
        });
            // Fin de fonction de controle de connexion
    //-----------------------------------------------------------------------------------------------------------------------       
            
            // Fonction pour mettre à jour les cellules avec des valeurs par défaut en rouge dans une colonne spécifique
            document.addEventListener("DOMContentLoaded", function() {
        // Spécifiez les indices des colonnes dans lesquelles vous souhaitez appliquer le style rouge
        var columnsToStyle = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; // Indices des colonnes département Utilisateur, Nom de l'utilisateur, Nom de l'ordinateur, Nom du Logiciel, Version du Logiciel
     
        // Sélectionnez toutes les lignes de tableau
        var rows = document.querySelectorAll('.table-scrollable tbody tr');
     
        // Parcourez toutes les lignes
        rows.forEach(function(row) {
            // Parcourez toutes les colonnes à styliser
            columnsToStyle.forEach(function(columnIndex) {
                var cell = row.querySelectorAll('td')[columnIndex];
                var cellValue = cell.textContent.trim();
                // Vérifiez si la valeur de la cellule est une valeur par défaut
                if (isDefaultValue(cellValue)) {
                    cell.classList.add('cellule-rouge'); // Ajoutez la classe pour le style rouge
                }
            });
        });
    });
     
            // Fonction pour vérifier si la valeur de la cellule est une valeur par défaut
            function isDefaultValue(value) {
                    var defaultValues = ["Indiquer le service commanditaire", "Indiquer l'utilisateur commanditaire", "Indiquer le n° de série du PC", "Indiquer le service payant", "Indiquer le numéro de Bon de commande", "Indiquer le numéro de ticket", "Indiquer le nom du logiciel", "Indiquer la version du logiciel", "Indiquer le numéro de série du logiciel", "Indiquer la clé de licence du logiciel", "Indiquer sur quels système d'exploitations l'installations est possible", "Indiquer la quantité de Licence achetée"];
                    return defaultValues.includes(value);
    }
            //Fin de fonction pour les cellules rouges des textes par défauts
    //-------------------------------------------------------------------------------------------------------       
            // Gestion des boutons
        document.getElementById("ajouterLogicielButton").addEventListener("click", function() {
            // Rediriger vers la page d'ajout de logiciel
            window.location.href = "Ajouts/ajouter_Logiciel.php";
        });
     
        document.getElementById("MAJLigneButton").addEventListener("click", function() {
            // Rediriger vers la page de mise à jour des lignes
            window.location.href = "MAJs/mise_a_jour_Ligne.php";
        });
     
        document.getElementById("SupLigneButton").addEventListener("click", function() {
            // Rediriger vers la page de suppression des lignes
            window.location.href = "Del/Suppression_ligne.php";
        }); 
            // Fin de gestion des boutons
    //--------------------------------------------------------------------------------------------------------      
     
    //Filtres
    // Sélectionnez le conteneur de l'en-tête
    var thead = document.querySelector('.table-scrollable thead');
     
    // Ajoutez des contrôles de filtrage sous chaque en-tête de colonne
    thead.querySelectorAll('th').forEach(function(header, index) {
        var filterContainer = document.createElement('div'); // Créez un conteneur pour l'en-tête de colonne
        filterContainer.classList.add('header-filter-container');
     
        var filterInput = document.createElement('input');
        filterInput.setAttribute('type', 'text');
        filterInput.setAttribute('placeholder', 'Filtrer');
        filterInput.addEventListener('input', function() {
            filterTable(index, this.value.toLowerCase());
        });
     
        // Ajoutez une classe pour définir le style du champ de recherche
        filterInput.classList.add('filter-input');
     
        filterContainer.appendChild(filterInput); // Ajoutez le champ de filtrage au conteneur
        header.appendChild(filterContainer); // Ajoutez le conteneur sous l'en-tête de colonne
     
        // Récupérez la largeur de la colonne en parcourant toutes les cellules de cette colonne
        var maxWidth = 0;
        var cells = document.querySelectorAll('.table-scrollable tbody td:nth-child(' + (index + 1) + ')');
        cells.forEach(function(cell) {
            var cellWidth = cell.getBoundingClientRect().width;
            maxWidth = Math.max(maxWidth, cellWidth);
        });
     
        // Définissez la largeur du champ de recherche en fonction de la largeur maximale de la colonne
        filterInput.style.width = (maxWidth - 95) + 'px'; // Ajoutez un espace supplémentaire pour les marges et le padding
    });
     
    // Fonction pour filtrer le tableau en fonction de l'index de la colonne et du critère de filtrage
    function filterTable(columnIndex, filterValue) {
        var rows = document.querySelectorAll('.table-scrollable tbody tr');
        rows.forEach(function(row) {
            var cell = row.querySelectorAll('td')[columnIndex];
            var cellText = cell.textContent.toLowerCase();
            if (cellText.includes(filterValue)) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
    } //Fin de fonction du filtre
     
    //------------------------------------------------------------------------------------------------
            
    // Fonction pour afficher le nombre de lignes lorsque l'utilisateur clique sur le bouton
    document.getElementById("bouton-entrees-trouvees").addEventListener("click", function() {
        mettreAJourNombreLignesAffichees();
    });     
     
    // Fonction pour mettre à jour le nombre de lignes affichées à l'écran
    function mettreAJourNombreLignesAffichees() {
        var tableau = document.querySelector('.table-scrollable tbody');
        var lignesVisibles = Array.from(tableau.rows).filter(function(row) {
            return row.offsetParent !== null; // Vérifie si la ligne est visible
        });
        var nombreLignes = lignesVisibles.length;
        var champResultat = document.getElementById("Inforesultat");
        if (champResultat) {
            champResultat.value = nombreLignes;
        } else {
            console.error("Champ 'Inforesultat' introuvable.");
        }
    }
    // Fin de fonction pour la mise à jour le nombre de lignes affichées à l'écran
    // fin du bloc filtre
    //-------------------------------------------------------------------------------------------------------------------------------
            
    // Bloc de fonction pour trie
    // Attacher la fonction de tri lors du clic sur l'en-tête de colonne
    document.querySelectorAll('.table-scrollable thead th').forEach(function(header, index) {
        header.addEventListener("click", function() {
            trierTableau(index);
        });
    });
     
    // Fonction pour trier le tableau
    function trierTableau(columnIndex) {
        var table, rows, switching, i, x, y, shouldSwitch;
        table = document.querySelector('.table-scrollable tbody');
        switching = true;
     
        while (switching) {
            switching = false;
            rows = table.rows;
            for (i = 0; i < (rows.length - 1); i++) {
                shouldSwitch = false;
                x = rows[i].getElementsByTagName("td")[columnIndex];
                y = rows[i + 1].getElementsByTagName("td")[columnIndex];
                if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                    shouldSwitch = true;
                    break;
                }
            }
            if (shouldSwitch) {
                rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                switching = true;
            }
        }
    } // // Fin de bloc de fonction pour trie
    //----------------------------------------------------------------------------------------------
     
    //Fonction MDP menus contextuel et clic droit
    // Sélectionner toutes les cellules de tableau
    const cells = document.querySelectorAll('.table-scrollable tbody td');
     
    // Ajouter un évènement contextmenu aux cellules
    cells.forEach((cell) => {
        cell.addEventListener("contextmenu", (e) => {
            e.preventDefault();
     
            // Obtenir l'index de la ligne
            const tableRow = e.target.closest("tr");
            const rowIndex = tableRow.rowIndex;
     
            // Afficher le menu contextuel
            showContextMenu(e, rowIndex);
        });
    });
     
    // Affiche le menu contextuel
    function showContextMenu(e, rowIndex) {
        const contextMenu = document.getElementById("contextMenu");
        contextMenu.style.display = "block";
        contextMenu.style.left = `${e.clientX}px`;
        contextMenu.style.top = `${e.clientY}px`;
     
        // Met à jour l'état du bouton Supprimer
        updateDeleteButtonState(rowIndex);
     
        // Ajouter un évènement pour copier
        document.getElementById("copyOptionClicDroit").addEventListener("click", () => {
            const selectedCell = e.target.innerText;
            navigator.clipboard.writeText(selectedCell);
        });
     
        // Ajouter un évènement pour la mise à jour
        document.getElementById("updateOptionClicDroit").addEventListener("click", () => {
            const password = prompt("Veuillez entrer le mot de passe pour la mise à jour :");
            if (password !== null) {
                verifyPasswordAndUpdate(password, rowIndex);
            }
        });
     
        // Ajouter des écouteurs d'événements pour masquer le menu contextuel
        window.addEventListener("click", hideContextMenu);
        window.addEventListener("keydown", handleEscKeyPress);
    }
     
    // Met à jour l'état du bouton Supprimer
    function updateDeleteButtonState(rowIndex) {
        const lastSelectableRowIndex = getLastSelectableRowIndex();
        const deleteBtn = document.getElementById("deleteOptionClicDroit");
        deleteBtn.style.display = rowIndex === lastSelectableRowIndex ? "block" : "none";
     
        // Ajouter un évènement pour la suppression
        deleteBtn.onclick = () => {
            const password = prompt("Veuillez entrer le mot de passe pour la suppression :");
            if (password !== null) {
                verifyPasswordAndDelete(password, rowIndex);
            }
        };
    }
     
    // MDP pour les menus conextuels
    // Vérifier le mot de passe et effectuer la mise à jour en incluant le numéro de ligne
    function verifyPasswordAndUpdate(password, rowIndex) {
        sendPasswordRequest(password, (data) => {
            if (password === data.gestionPage) {
                // Rediriger vers la page de mise à jour en incluant le numéro de ligne
                window.location.href = "MAJs/mise_a_jour_Ligne.php?row=" + rowIndex;
            } else {
                alert("Mot de passe incorrect. Accès refusé !");
            }
        });
    }
     
    // Vérifier le mot de passe et effectuer la suppression en incluant le numéro de ligne
    function verifyPasswordAndDelete(password, rowIndex) {
        sendPasswordRequest(password, (data) => {
            if (password === data.gestionPage) {
                // Rediriger vers la page de suppression en incluant le numéro de ligne
                window.location.href = "Del/Suppression_ligne.php?row=" + rowIndex;
            } else {
                alert("Mot de passe incorrect. Accès refusé !");
            }
        });
    }
     
    // Envoyer une requête AJAX pour vérifier le mot de passe
    function sendPasswordRequest(password, callback) {
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                const data = JSON.parse(xhr.responseText);
                callback(data);
            }
        };
        xhr.open("GET", "../MDP/MDP_GestionPage.json", true);
        xhr.send();
    }
     
    // Obtient l'index de la dernière ligne sélectionnable
    function getLastSelectableRowIndex() {
        const selectableTableBodyRows = [...document.querySelectorAll("tbody > tr")];
        const headerRowCount = (document.querySelector("thead") || {}).rows.length;
        return selectableTableBodyRows.length - (headerRowCount ? 0 : 1);
    }
     
    // Cache le menu contextuel
    function hideContextMenu() {
        const contextMenu = document.getElementById("contextMenu");
        contextMenu.style.display = "none";
        window.removeEventListener("click", hideContextMenu);
        window.removeEventListener("keydown", handleEscKeyPress);
    }
     
    // Gère la touche Echap pour fermer le menu contextuel
    function handleEscKeyPress(e) {
        if (e.code === "Escape") {
            hideContextMenu();
        }
    } //Fin de fonction MDP menus contextuel et clic droit
    //-----------------------------------------------------------------------------------------------------
    //Bloc pour la gestion de mot de passe des boutons
    // Fonction pour activer les boutons de gestion après la saisie du mot de passe
    function activerBoutonsGestion() {
        document.getElementById('ajouterLogicielButton').hidden = false;
        document.getElementById('MAJLigneButton').hidden = false;
        document.getElementById('SupLigneButton').hidden = false;
        document.getElementById('export-btn').hidden = false;
    }
     
    // Fonction pour activer la gestion de la page après la saisie du mot de passe
    function activerGestionPage() {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var data = JSON.parse(xhr.responseText);
                var password = prompt("Veuillez entrer le mot de passe pour activer la gestion de la page :");
                if (password === data.gestionPage) {
                    alert("Accès autorisé à la gestion de la page !");
                    activerBoutonsGestion();
                } else {
                    alert("Mot de passe incorrect. Accès refusé !");
                }
            }
        };
        xhr.open("GET", "../MDP/MDP_GestionPage.json", true);
        xhr.send();
    }
     
    // Attendre que le DOM soit entièrement chargé
    document.addEventListener("DOMContentLoaded", function() {
        // Associer la fonction activerGestionPage au bouton "Activer la gestion de la page"
        document.getElementById('btnActiverGestion').addEventListener('click', activerGestionPage);
     
        // Cacher les boutons de gestion au chargement de la page
        document.getElementById('ajouterLogicielButton').hidden = true;
        document.getElementById('MAJLigneButton').hidden = true;
        document.getElementById('SupLigneButton').hidden = true;
        document.getElementById('export-btn').hidden = true;
    }); // Fin de la fonction pour la gestion de la page avec mot de passe
    //Fin de bloc pour la gestion de mot de passe des boutons
     
    //--------------------------------------------------------------------------------------------------------------------------
    </script>
     
     
    <script src="prism/prism.js"></script>
    </body>
    </html>

    Citation Envoyé par NoSmoking Voir le message
    Bonjour,

    pas sûr que cela soit la meilleure idée, il me semble que l'ajout d'une colonne avec un bouton edit serait plus judicieux pour l'utilisateur.


    en fait pas vraiment, à moins que je mette la colonne à gauche du tableau, car celui-ci prend vraiment de la place...
    mais ça reste effectivement une alternative

  8. #8
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 428
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 428
    Points : 4 910
    Points
    4 910
    Par défaut
    Citation Envoyé par draidius Voir le message
    Et d’après ce que j'ai compris pour les suppressions, de toute façon il va falloir que je ne base plus mon tableau php sur les ID mais sur les lignes de manière qu'en cas de suppression, cela ne fasse pas de "trou" dans le tableau visible par les utilisateurs
    Que voulez-vous dire par "un trou dans le tableau", une ligne vide ?

    La suppression doit être obligatoirement faite en fonction d'un Identificateur unique, ceci dit que la table SQL devrait avoir la colonne ID comme clé primaire et auto-incrémente

    Citation Envoyé par draidius Voir le message
    en fait pas vraiment, à moins que je mette la colonne à gauche du tableau, car celui-ci prend vraiment de la place...
    Avec le plugin que je vous ai suggéré plus haut, les colonnes sont cachées/affichées automatiquement en fonction de la largeur du navigateur, c'est ce qu'on appelle le mode responsive.

    Citation Envoyé par NoSmoking Voir le message
    Pas nécessairement, il suffit non pas de modifier les contenus mais de « replacer » les lignes, comme le fait d'ailleurs draidius dans sa fonction, mais une fois la totalité du tri effectué avec, par exemple, prepend() ou append() suivant le sens de celui-ci.
    C'est vrai ! je ne sais pas pourquoi je n'ai pas pensé à append() ou prepend() , je modifies donc ma réponse précédente.

  9. #9
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 034
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 034
    Points : 44 406
    Points
    44 406
    Par défaut
    Petite précision concernant prepend(), dans son mode insertion de plus d'un élément elle ne sert à rien car le « lot » sera inséré avant le premier élément mais en respectant l'ordre, il faut donc faire un reverse des éléments avant ce qui ne représente plus grand intérêt !

    La fonction pourrait ressembler à :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    /**
     * Tri les lignes d'une TABLE
     * @param {number} col - colonnne de la table à trier
     * @param {number} inc - sens du tri DEC si < 0 sinon ASC
     * @returns {Array} tableau des TR dans l'order à toutes fins utiles
     */
    function trierTable(col, inc) {
      const tbody = document.querySelector(".table-scrollable tbody");
      const rows = [...tbody.rows];
      // autre version possible en direct
      // const rows = [...document.querySelectorAll(".table-scrollable tbody tr")];
      rows.sort((a, b) => {
        return a.cells[col].textContent.localeCompare(b.cells[col].textContent)
      });
      if (inc < 0) rows.reverse();
      tbody.append(...rows);
      return rows;
    }
    Il faudrait bien sûr « blinder » la fonction si l'on doit également gérer des numéros ou des dates, si format autre que YYYY-MM-DD.


    Citation Envoyé par Toufik83
    Avec le plugin que je vous ai suggéré plus haut, les colonnes sont cachées/affichées automatiquement en fonction de la largeur du navigateur, c'est ce qu'on appelle le mode responsive.
    Pas besoin il utilise « l'excellente source » : Table scrollable avec colonne fixe

Discussions similaires

  1. [XL-2010] Récupérer le bon Numéro de ligne avec valeur d'un Combox
    Par skyzix dans le forum Macros et VBA Excel
    Réponses: 6
    Dernier message: 25/04/2019, 14h19
  2. Réponses: 4
    Dernier message: 17/09/2016, 21h07
  3. Un programme informatique apprend le bon sens en ligne
    Par Stéphane le calme dans le forum Actualités
    Réponses: 9
    Dernier message: 09/12/2013, 12h05
  4. [ACCESS SQL] UNION renvoie pas le bon nb de lignes
    Par le lynx dans le forum Langage SQL
    Réponses: 2
    Dernier message: 29/06/2006, 10h57
  5. Requête UNION renvoie pas le bon nombre de lignes
    Par le lynx dans le forum Contribuez
    Réponses: 2
    Dernier message: 29/06/2006, 10h52

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo