Discussion :

[lexgotham]

Bonjour,

j'ai besoin de pouvoir réorganiser les colonnes d'un tableau en glissant-déposant les cellules d'en-tête du tableau (pas les cellules de données). Jusque là, tout va bien.

Code :

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

1
2
3
4
5
6
7
8
$( ".tablex thead tr" ).sortable({
    containment: "parent",
    placeholder: "placeholder",
    helper: 'clone',
    axis: 'x',
    appendTo: '.tablex thead',
    start: function(e, ui) {ui.helper.hide();}
});

Le seul problème c'est que je ne peux voir bouger pendant le déplacement que le placeholder de l'entête du tableau. Pas toute la colonne. Rien de surprenant, c'est le comportement par défaut de sortable.
Mais j'aimerais que le placeholder soit TOUTE la colonne (ou autre solution pour un même résultat). Cela n'est pas documenté et je n'ai trouvé aucune discussion sur le net à ce sujet.

Y-a-til un moyen d'y parvenir?

J'ai bien tenté ceci:

Code :

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

1
2
3
4
5
6
7
8
9
10
$( ".tablex thead tr" ).sortable({
    containment: ".tablex",
    placeholder: "placeholder",
    helper: 'clone',
    appendTo: '.tablex',
    start: function(e, ui) {
        ui.helper.hide();
        ui.placeholder.html('...recréer entièrement la colonne en html...');
    }
});

Mais alors, si j'ai bien une colonne comme placeholder, elle est visuellement confinée à l'intérieur de la cellule d'en-tête que je bouge. Pas moyen de faire en sorte que la colonne s'affiche parmi les autres colonnes du tableau.

De l'aide serait apprécié.

Merci

[Toufik83]

Il te faut un script js nommé sorttable.js (avec deux "t"), plus le sortable de jquery-ui.
Regarde cette page, plus précisément les exemples 4,6 et 7 correspondent à ce que tu cherches à faire.

[lexgotham]

Merci, ça a l'air d'être exactement ce qu'il me faut.
j'ai essayé et ça fait bien ce que je veux sauf que le placeholder de la colonne de data se tape en fin de tableau et ne bouge pas. Vu que ça fonctionne sur les exemples, je suppose que j'arriverai bien à le faire fonctionner chez moi. Je ne mets pas encore comme résolu mais le ferai dès que ça marche.
Merci beaucoup pour le tuyau!

[lexgotham]

J'ai trouvé la source du problème.

Dans l'exemple donné, l'auteur n'utilise pas les tag "<thead>" et mets les "<th>" directement dans le "<tbody>".
Sans cela, ça ne fonctionne pas (j'ai essayé sur son propre exemple) et donne le problème que j'ai: le placeholder de la colonne est déplacé en fin de tableau et y reste figé.
le problème c'est que j'utilise Datatables et ce dernier impose les theads dans les tableaux qu'il génère...
Donc même si c'est génial comme trouvaille (merci), ça ne règle pas mon problème.
A moins de savoir comment modifier le script de sorttable mais il n'est pas simple à comprendre pour moi.
Bref, c'était trop beau.

[Toufik83]

Une autre source utile., ils existent plusieurs plugins qui font ça, il faut juste chercher aux bons endroits.

Un exemple sur jsfiddle.

[lexgotham]

Merci pour ton aide. Celui-là non plus ne fonctionne pas (je l'avais déjà essayé).
En fait, j'en ai essayé une flopée avant de venir poser ma question. Ca fait des jours que je cherche.
Celui que tu as proposé en premier, je ne suis juste jamais tombé dessus (ce qui m'a surpris).
Mais tous les autres que j'ai essayé (et j'ai vraiment l'impression d'avoir fait le tour) sont en conflit avec dataTables.
Le dernier lien par exemple: il fonctionne mais il désactive l'accès aux tris de colonnes de dataTables, parce qu'il est exécuté au mousedown (et non au drag) alors que l'autre action l'est aussi. Il y a donc conflit.

En tous cas merci beaucoup pour ton aide.