Discussion :

[clavier12AZQSWX]

bonjour,

j'ai un long tableau de données de 24 colonnes et en bout de tableau une 25eme colonne qui affiche les contrôles/bouton/lien pour agir sur les données de la ligne (ce sont des contrôles de type élément avec des ID).
Je n'ai pas le moyen d'avoir un tableau avec une colonne fixe (comme dans excel) pour préserver (figer) la dernière colonne et la rendre visible.
Donc mon idée, est de copier/dupliquer la dernière colonne et de mettre le clone en tête du tableau.
est-ce possible ?

J'ai vu des exemples de la commande .clone mais ça semble fonctionner que pour des éléments horizontaux (des DIV par exemple) et en plus ça ne modifie pas les ID. Si j'ai un bouton "id=12", je voudrais que le clone devienne "ID=12copy"

Que feriez-vous à ma place ? je ne peux qu'ajouter un script js/jq en fin de page pour améliorer l'interaction de l'utilisateur et lui enlever cette nécessite de scroller à la fin pour lire la dernière colonne de boutons.

ps : non, acheter un écran 32pouces 8k n'est pas une option, ça rentre pas dans le budget!

[SpaceFrog]

Oui tu peux cloner les éléments et en changer les id avant de les insérer dans le DOM

[clavier12AZQSWX]

oui, je trouve plein d'exemples de la fonction clone et la doc est bien détaillée :
https://api.jquery.com/clone/
mais curieusement elle ne propose aucun exemple sur des tableaux, juste sur des choses clonées horizontales.
Cloner une colonne suppose de cloner chaque td&th et de mettre chaque clone côté de chaque cible.
c'est pas parreil que cloner un groupe entier et de le mettre à côté d'un autre.

la sélection des td/th ne me pose pas de souci , je le vérifie en la masquant la colonne qui va être clonée pour tester (si je masque la bonne bonne colonne, c'est que je sélectionne la bonne, non ?)

Code jquery :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#montableau td:nth-child(25),#montableau th:nth-child(25)').hide();

La difficulté vient de où je mets le contenu cloné !? c'est pas comme si je copiais la colonne dans un autre tableau vide, là c'est le même tableau...

Code jquery :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#montableau td:nth-child(25),#montableau th:nth-child(25)').clone().appendTo( "??????" );

j'ai découvert qu'on pouvait sélectionner la 1ere colonne , la mettre en rouge par exemple:

Code jquery :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#montableau tr td:first-child,#montableau tr th:first-child').css('background-color', 'red');

Du coup, j'ai joué au cascadeur et j'ai tenté de Prepender le clone de la dernière colonne juste avant la 1ere colonne :

Code jquery :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#montableau td:nth-child(25),#montableau th:nth-child(25)').clone().prependTo('#montableau tr td:first-child,#montableau tr th:first-child');

qui ne marche évidemment pas !

j'ai aussi tenté de Appender la clone au début du tag tableau :

Code jquery :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#montableau td:nth-child(25),#montableau th:nth-child(25)').clone().appendTo( '#montableau');

Comme les cellules sont inscrites de façon linéaires dans le code HTML, c'est impossible d'utiliser .clone ! ça me parait évident qu'on ne puisse pas car dans le navigateur on ne peut pas mettre en surbrillance une colonne (ou copier son contenu dans le presse-papier) sans prendre tout le tableau !

Je vais brainstormer sur une autre méthode (cloner chaque dernière cellule afin de créer une colonne doublon et ensuite déplacer cette colonne....) Toute une aventure..

[SpaceFrog]

En général je mets au debut de mon tableau une ligne "temlplate" en display none avec un id que je peux cloner, manipuler à ma guise et ensuite appender à mon tableau

[clavier12AZQSWX]

j'ai affiché par curiosité le contenu html de mon clone (que je ne sais pas où mettre), et à ma grande surprise, il ne contient pas les balise TH,TD mais le contenu d'elles !
vraiment étrange, j'ai l'impression que ma selection est donc inutilisable.

Code jquery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var clone=$('#montableau td:nth-child(25),#montableau th:nth-child(25)').html();
alert(clone);

Je passe par un framework propriétaire et hélas je n'ai pas la possibilité de mettre une colonne 'template' invisible à l'avant du tableau.... mais un big-up pour votre idée d'anticipation!

[CosmoKnacki]

Je n'ai pas le moyen d'avoir un tableau avec une colonne fixe (comme dans excel) pour préserver (figer) la dernière colonne et la rendre visible.

Et pourquoi donc? C'est tout à fait faisable en css.

[Toufik83]

Tu veux que la dernière colonne soit toujours visible pour l'utilisateur afin qu'il ne soit pas obligé de scroller horizontalement pour la saisir?

Si c'est ça, je pense qu'il fallait penser avant au mode responsive et empêcher la barre horizontale de la page d'apparaitre, et à mon avis la meilleure solution est
de jouer avec la visibilité des colonnes en fonction de la largeur de l'écran comme ce qu'ils font avec DataTable Responsive.

En utilisant les classes de control all,tablet-l,tablet-p,min-tablet,mobile-l,mobile-p,min-phone,never,desktop,none...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<tr><th class="all">Name</th>
    <th class="min-phone-l">Position</th>
    <th class="min-tablet">Office</th>
     <th class="never">Start date</th>
     <th class="desktop tablet">Salary</th>
     <th class="none">Extn.</th>
</tr>

Lorsqu'une colonne a la classe all, elle est toujours visible, et je crois que c'est ce qu'il te faut pour gérer la visibilité de la dernière colonne.

Pour voir les colonnes masquées, cliques sur la petite flèche au début de chaque ligne.

Je ne dis pas qu'il faut utiliser ce plugin, mais si c'est ce que tu cherches à faire c'est faisable avec js et css...

[clavier12AZQSWX]

J'ai un framework interne propriétaire qui fait le rendu html. Je n'ai que 2 options :
1 - lui dire si je veux la colonne des contrôles (boutons,option,case à cocher) à gauche ou en fin de tableau à droite. (actuellement c'est à droite par défaut, j'ai laissé)
2 - poser un script js ou jq dans la page (pour intervenir à ma guise sur le rendu html fait).

Actuellement j'ai choisi la 2nd solution car le Nb de fois où le tableau atteint 24+ colonnes est rare donc la dernière colonne est souvent visible, sauf les cas de grande quantité de colonnes.