Sortable + dataTables + vitesse de traitement/exécution (décrochage)

**lexgotham** · 11/03/2019, 20h15

Bonjour!

Je suis en train de coder un système de tableau avancé avec jQuery Datatables.
En plus d'un tableau alimenté par AJAX, j'ai une liste <UL> reprenant les en-têtes du tableau et en "draggant" les éléments de cette liste verticalement, je peux réorganiser les colonnes du tableau en temps réel grâce à jQueryUI Sortable.

Code HTML :

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

1
2
3
4
5
6
7
<div class="table_holder">
    <table class="table_x"></table>
</div>
 
<div class="panneau">
    <ul class="panneau_list"></ul>
</div>

jQUery:

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
var oldValue ='';
var origValue;
 
var dataTable = $('.table_x').DataTable({
    'bInfo'     : false,
    'paging'    : false,
    'scrollX'   : false,
    'processing': false,
    'sDom'      : 'ltipr',
    'order'     : [[0,"asc"]],
    'colReorder': {realtime:true},
    'data'      : dataSet,
    'columns'   : my_columns
});
dataTable.colReorder.disable();
 
$( ".panneau_list" ).sortable({
    placeholder: "panneau_highlight",
    tolerance: "pointer",
    axis: "y",
    opacity: 0.6,
    cancel: ".unticked",
    start :function(event, ui){
        dataTable.colReorder.enable(true);
        origValue=ui.item.index()+1;
    },
    change: function(event, ui){	
        var a= ui.placeholder.index();
        var b= ui.placeholder.index()+1;	
        var c= ui.placeholder.index()+2;
        var d= ui.placeholder.index()-1;
 
        if(origValue>a){
            if((oldValue !='') && (oldValue<=a)){dataTable.colReorder.move(a,b);}
            else			        {dataTable.colReorder.move(c,b);}
            oldValue=b;
        }
        else{
            if((oldValue !='') && (oldValue >a)){dataTable.colReorder.move(b,a);}
	    else			  	{dataTable.colReorder.move(d,a);}
	    oldValue=a;
	}
    },
    stop  : function(event, ui){
	dataTable.colReorder.disable(true);
	oldValue ='';
    }
});

Donc, chaque fois qu'un élément de la liste est déplacé verticalement grâce à Sortable, la colonne correspondante du tableau est déplacée dans le tableau en temps réel grâce à "colReorder.move" de dataTables.
Et ça marche très très bien...
SAUF quand le mouvement de la souris est trop rapide...

En effet, après l'event "start" et avant l'event "stop" du script Sortable (bref, quand on déplace un élément de la liste avec la souris), tant que la vitesse de déplacement est normale ou rapide, tout suit comme il faut dans le tableau, sans la moindre erreur, mais dès que le mouvement de souris dans la liste est vraiment rapide, le script finit par sélectionner en cours de route une mauvaise colonne du TABLEAU tout en continuant son déplacement (l'élément sélectionné de la liste lui, reste le bon). Le script ne semble pas être perturbé par la vitesse du déplacement en soi, tout semble fluide, juste qu'il finit par attraper en route une autre colonne du tableau que celle choisie initialement.
Il semble dès lors que le script se trompe en cours de route sur la position du placeholder et donc sur les valeurs a,b,c,d se trouvant dans les "colReorder.move" de l'event "change" de sortable.

Pour m'assurer que le script ne change pas d'event et reste bien en "change" durant les déplacements rapides, j'ai mis un console.log() à l'event "start" et "stop". Et c'est sans appel, lors du décrochage, le script est toujours en "change". C'est donc bien à l'intérieur de cet événement que le problème se pose. Ni avant, ni après. Le script n'interprète donc pas ce déplacement rapide comme une série de drags successifs. C'est bel et bien le même event.

A ce stade, je suis alors un peu perdu. Comme cela fonctionne très bien à vitesse normale, il semble que le script lors de l'event "change" n'a pas d'erreur à rectifier. Donc, je suppose que c'est une affaire de performance de script à haute vitesse.
Mais je ne saurais dire si c'est dû à dataTables ou à Sortable ou même à jQuery.
Et si je dois changer le code dans l'événement "change" pour l'optimiser afin d'éviter les décrochages, comme ce ne sont que des "if" et "else" très basiques, je ne vois pas ce que je pourrais faire de plus simple.
J'espère alors que vous comprendrez qu'il est difficile de voir ce qu'il y à faire quand ça marche parfois mais pas toujours et que la seule variable d'ajustement semble être la vitesse de déplacement...

Une idée sur ce qui cloche? Même théorique?
Est-ce, à votre avis, une affaire de performance d'un des deux plugins? De vitesse limite de traitement de jQuery, UI Sortable ou dataTables?
Est-ce moi qui code comme un pied (m'étonnerait pas)?

Qu'on s'entende bien, le script ne pose aucun problème dans 95% des cas mais déraille dans les 5% des cas où la personne drag & drop trop vite. Et cela n'arrive QUE dans ce cas-là.
Mais bon, la marge d'erreur doit être nulle quand même, je ne peux pas laisser passer ça.

Merci pour votre contribution.

**Toufik83** · 11/03/2019, 22h25

Salut,

si c'est un problème de temps, commence par setTimeout pour contrôler le mouvement du placeholder.

**lexgotham** · 11/03/2019, 23h58

Merci Toufik83. Encore toi, ça fait plaisir :-)

Si je comprends bien le concept, j'ai du mal à saisir comment le mettre en oeuvre.
Veux-tu dire que je retarde les "colReorders.move" (et donc toute le bloc if/else) pour laisser au script le temps de donner les bonnes valeurs mises à jour aux variables a,b,c,d?
Si c'est bien ça, j'ai essayé (avec un setTimeout exagéré pour être certain):

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
....
change: function(event, ui){	
    var a= ui.placeholder.index();
    var b= ui.placeholder.index()+1;
    var c= ui.placeholder.index()+2;
    var d= ui.placeholder.index()-1;
 
    setTimeout(function(){
        if(origValue>a){
            if((oldValue !='') && (oldValue<=a)){dataTable.colReorder.move(a,b);}
            else			        {dataTable.colReorder.move(c,b);}
            oldValue=b;
        }
        else{
            if((oldValue !='') && (oldValue >a)){dataTable.colReorder.move(b,a);}
	    else			  	{dataTable.colReorder.move(d,a);}
	    oldValue=a;
	}	
    },500)
},
....

Si j'ai évidemment une latence entre le mouvement dans la liste et celui dans le tableau maintenant, ça ne change par contre rien pour le décrochage qui a toujours lieu quand les déplacements dans la liste sont rapides.

Pas certain que j'ai bien compris ce que tu proposais cela dit.

Voici un lien qui te permet de voir le problème:
https://www.lexgotham.com/test3/biens.php

il suffit de cliquer sur le bouton "Affichage" en bas à droite de l'écran pour voir la liste et déplacer les éléments.

Merci pour ton/votre aide!

**Toufik83** · 12/03/2019, 12h16

Oublies le callback "change" et supprime le code qui est dedans ou le commenter pour l'instant, et essaie de mettre un setTimeout dans "start" et "stop".

Sinon il faut que je fasse le teste en local afin d'identifier l'anomalie dans le script .

**lexgotham** · 12/03/2019, 13h28

Merci pour ton aide.

Dis, je suis désolé mais je ne comprends pas ce que tu me demandes.
Tu veux que je commente tout le contenu du "change" sur le serveur d'essai ? Je mets quoi dans le start et le stop? Un setTimeout, d'accord, mais autour de quoi? Manifestement, tu veux tester un truc et je suis super ok, mais je n'ai pas tout saisi, sorry.
Si tu veux bidouiller le script in situ, je peux aisément te donner un accès en MP, pas de souci.
Sinon, dis-moi quoi faire en considérant que je ne sais rien des procédures de test.

A+!

**Toufik83** · 12/03/2019, 14h33

L'exemple que tu as montré est très serré, et m'empêche de voir clairement ce qui se passe réellement.
Tu peux me donner un accès à ton site pour que je fasse un test avec moins de colonnes ?

Sortable + dataTables + vitesse de traitement/exécution (décrochage)

jQuery

Vue hybride

Discussions similaires

Partager

Partager