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

  1. #1
    Membre à l'essai
    Inscrit en
    octobre 2007
    Messages
    32
    Détails du profil
    Informations forums :
    Inscription : octobre 2007
    Messages : 32
    Points : 19
    Points
    19

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

    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.

  2. #2
    Membre expérimenté Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    844
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : Maroc

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

    Informations forums :
    Inscription : janvier 2012
    Messages : 844
    Points : 1 353
    Points
    1 353

    Par défaut

    Salut,

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

  3. #3
    Membre à l'essai
    Inscrit en
    octobre 2007
    Messages
    32
    Détails du profil
    Informations forums :
    Inscription : octobre 2007
    Messages : 32
    Points : 19
    Points
    19

    Par défaut

    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!

  4. #4
    Membre expérimenté Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    844
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : Maroc

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

    Informations forums :
    Inscription : janvier 2012
    Messages : 844
    Points : 1 353
    Points
    1 353

    Par défaut

    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 .

  5. #5
    Membre à l'essai
    Inscrit en
    octobre 2007
    Messages
    32
    Détails du profil
    Informations forums :
    Inscription : octobre 2007
    Messages : 32
    Points : 19
    Points
    19

    Par défaut

    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+!

  6. #6
    Membre expérimenté Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    844
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : Maroc

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

    Informations forums :
    Inscription : janvier 2012
    Messages : 844
    Points : 1 353
    Points
    1 353

    Par défaut

    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 ?

  7. #7
    Membre expérimenté Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    844
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : Maroc

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

    Informations forums :
    Inscription : janvier 2012
    Messages : 844
    Points : 1 353
    Points
    1 353

    Par défaut

    Salut,
    J'ai trouvé un moyen mais je ne sais pas si c'est la meilleure solution, si quelqu'un voit cette discussion et qu'il peut faire mieux, ce serai cool.

    essaie ça :
    Code js : 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
     
    start: function(event, ui){
    	dataTable.colReorder.enable(true);
    	$('.table_x th').css('background',"none")
    	.closest('table').find('th:contains("'+ui.item.text().trim()+'")')
    	.css('background-color','#4c3c49');
    	ui.item.css('background','#6a5466');
     
    },
    change: function(event, ui){
    	var from_ = $('.table_x th:contains("'+ui.item.text().trim()+'")').index()//le plus important dans tout ça.
    		,to_ = ui.placeholder.index();		
    	$('.table_x th').css('background',"none")
    	.closest('table').find('th:contains("'+ui.item.text().trim()+'")')
    	.css('background-color','#4c3c49');
     
            dataTable.colReorder.move(from_,to_);
    },
    stop: function(event, ui){
    	ui.item.css({backgroundColor: "#212933" });
    	var str='Alias__';
    	$(".ticked").each(function(){str=str+$(this).text()+'__';})
    	setTableOrder(str);
    	dataTable.colReorder.disable(true);
    }

    Remarque : si tu fais en sorte que les div a droite auront le même texte des noms des colonnes ce serait beaucoup mieux, et au lieu d'utiliser contains, on peut utiliser directement .text().

  8. #8
    Membre à l'essai
    Inscrit en
    octobre 2007
    Messages
    32
    Détails du profil
    Informations forums :
    Inscription : octobre 2007
    Messages : 32
    Points : 19
    Points
    19

    Par défaut

    Bon, alors j'ai essayé.

    Pour une raison que j'ignore à moitié, ton script fonctionne bien mieux dans la mesure où on sent clairement que le changement de colonne est beaucoup beaucoup plus réactif.
    Je l'ai fait décrocher une seule fois (sais pas comment d'ailleurs) et après je n'ai plus réussi à le faire décrocher. Pour moi, ça me suffit amplement!
    1 erreur sur 10, que je n'ai pas réussi à reproduire, ça me va.
    A mon avis, il me semble que c'est le fait que tu n'utilises plus le placeholder comme repère pour le "from" qui accélère le script.
    Chercher à connaître sa position en temps réel semble couteux en terme de ressources/vitesse de traitement.

    Mais ta parade a un énorme effet de bord (un bug quoi) car elle ramène à l'avant-plan mon problème d'origine:

    Imaginons que tu choisisses le colonne "chambres" par exemple. Tant que tu déplaces tout le temps la colonne à gauche de sa position d'origine ou alors tout le temps à droite de sa position d'origine, tout va bien.
    Mais quand tu passes de gauche à droite ou de droite à gauche de cette position d'origine, tu as alors un offset de la colonne manipulée car la colonne que tu manipules (le placeholder) garde toujours son index, pendant la manipulation.
    Ce qui est archi-chiant. Si son index d'origine était 10 par exemple, tant que tu te déplaces entre les index 1 et 9, ça va. Pareil entre 11 et le dernier. Mais si tu te déplace entre 9-11 ou 11-9, tu dois sauter l'index 10 car l'index 10, tu es en train de le déplacer. Il ne sort pas du flux! Et encore, ça c'est la version simplifiée car en réalité, si tu vas de droite à gauche le placeholder prend l'index 10 et quand tu vas de gauche à droite, il prend l'index 9 (ou inversement mais un truc dans le genre). Bref, l'index de ce que tu manipules change de valeur selon que tu traverses la position d'origine de G à D ou de D à G.
    Ca a l'air d'être codé de la sorte dans DataTables, c'est hyper contre-intuitif et je n'ai pas pu contourner cette particularité et ai donc dû l'attaquer de front.

    Il faut donc tenir compte du fait que cet index n'existe plus en arrière-plan pendant cette manipulation et faire la corrections en temps réel.
    Raison pour laquelle j'utilisais le placeholder comme référence et raison pour laquelle j'utilise les if/else. Dans ce cas, et dans ce cas seul, ça marche.

    Reste à voir comment je vais faire pour, comme toi, ne plus utiliser le placeholder comme référence, tout en sachant si le placeholder est à gauche ou à droite de sa position d'origine en temps réel (mais pour le savoir, il faut que je fasse une requête de sa position actuelle, ce qui revient à faire ce que j'avais fait, et donc ralentir le script).

    J'essaye de bidouiller et d'être créatif avec la nouvelle info précieuse que tu m'as apportée et te dis ce qu'il en est.

    En tous cas, merci, je vois au moins à quoi est dû le problème de décrochage et ça c'est déjà énorme! merci!

    PS: voici l'adresse du site avec ton script, si tu veux voir l'erreur que je t'ai décrite en live:
    https://www.lexgotham.com/test3/biens.php

  9. #9
    Membre expérimenté Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    844
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : Maroc

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

    Informations forums :
    Inscription : janvier 2012
    Messages : 844
    Points : 1 353
    Points
    1 353

    Par défaut

    Je l'ai fait décroché une seule fois (sais pas comment d'ailleurs) et après je n'ai plus réussi à le faire décrocher. Pour moi, ça me suffit amplement!
    J'ai modifié beaucoup de choses dans ton code js, parce que j'ai vu que tu utilises $.ajax en async:false, et ça je ne te conseil pas de le faire parce que pendant qu'ajax est entrain de faire le traitement, le navigateur reste bloqué jusqu'à ce que le résultat soit disponible et c'est peut être pour ça que tu as une erreur de déplacement de colonne.

    essaie de supprimer tout les async:false de ton code, et au lieu de mettre ton code dans success/error, utilise .done/.fail

    Bref, voilà le fichier custom.js
    Code js : 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
     
    /*---------------------------------------------------------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------------------------*/
     
    var dataTable;
    var my_panel_entry;
    var active;
    //var stopx;
    var origValue;
    //var newBackg;
    var my_columns       = [];
    var dataSet          = [];
    var stripped_dataSet = [];
    //var startInd		 = '';
    var oldValue 		 = '';
    var s 				 = 0;
    var panel_status	 = 0;
    //var userId           = 0
     
    /*---------------------------------------------------------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------------------------*/
     
    $(document).ready(function() {
     
    	// Initialize------------------------------------------------------------//
     
    	initialize();
     
    	// DrawDataTable --------------------------------------------------------// 
     
        drawDataTable();
     
    	// Finalize -------------------------------------------------------------// 
     
    	finalize();
     
    	s=1;
    });
     
    window.onresize = function(){
     
    	// Initialize------------------------------------------------------------//
     
    	initialize();
     
    	// ResetTable------------------------------------------------------------//
     
    	resetTable();
     
    	// CellStatus------------------------------------------------------------//
     
    	cellStatus();
    };
     
    /*---------------------------------------------------------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------------------------*/
     
    function initialize(){
    	var winWidth     = $(window).width();
    	var winHeight    = $(window).height();
    	var nbr          = $('.menu_item').length;
     
    	//Set page borders --------------------------------------------------//
     
    	$('.border_top'   ).height(2); $('.border_top'   ).width (winWidth   );
    	$('.border_left'  ).width (2); $('.border_left'  ).height(winHeight-4);
    	$('.border_right' ).width (2); $('.border_right' ).height(winHeight-4);
    	$('.border_bottom').height(2); $('.border_bottom').width (winWidth   );
     
    	//Menu items --------------------------------------------------------//
     
    	$('.menu'         ).width(winWidth-4);
    	$('.menu_item'    ).width((winWidth-155)/nbr);
    	$('.menu'     	  ).fadeIn(300);
    }
     
    /*---------------------------------------------------------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------------------------*/
     
    function drawDataTable(){
    	my_columns       = [];
    	dataSet          = [];
    	stripped_dataSet = [];
    	if(s==1){dataTable.destroy();};
    	getTableData();
     
    }
     
    /*---------------------------------------------------------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------------------------*/
     
    function getTableData(){
    	    $.ajax({
            type    : 'GET',
            url     : 'php/ajax/get_table_values.php',
            data    : 'value=1',
            dataType: 'json',
    		cache   : false
    	})
    	.done(function(response){
    		console.log("reponse :",response);
    		dataSet = response;
    		$.each(dataSet[0], function(key, value)
    		{	
    			var my_item = {};
    				my_item.data = key ;
    				my_item.title = key ;
    				my_columns.push(my_item);
    		});
    		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();
    		for(var i=0;i<= my_columns.length;i++){if(i>1){$('.table_x th:nth-child('+i+')').append('<div class="expand"></div>');};};
    		resetTable();
    		cellStatus();
    	})
    	.fail(function(response){
    		alert('Erreur ajax :'+response.responseText);
    	}); 
    }
     
    /*---------------------------------------------------------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------------------------*/
     
    function resetTable(){
    	var this_text;
    	var this_index;
    	var old_th_width;
    	var new_th_width = 0;
    	var th_width     = 0;
    	var thw			 = $('.table_holder').width();
    	if(s==0){
    		$('.table_x th').each(function(){
    			var this_text= $(this).text();
    			var this_html= $(this).html();
    			active= this_text.substr(this_text.length - 1);
    			if(active==0){
    					var tableColumn = dataTable.column($(this).index());
    					tableColumn.visible(false);
    			}
    			$(this).html(this_html.replace(this_text,(this_text.slice(0, -2))));
    		});	
    	};
    	$('.table_x'   ).width(thw)
    	$('.table_x th').css ('width','auto');
    	$('.table_x td:first-child').each(function(){
    		old_th_width = th_width;
    		var element=$(this).clone()
    						   .css({'display': 'inline', 'width': 'auto', 'visibility' : 'hidden',
    								 'font-family': 'Lato','font-size':'11px','font-weight':'400',
    								 'position': 'absolute','top':'0px','left':'0px','padding':10
    							})
    						   .appendTo('body');
    		var rect = element[0].getBoundingClientRect();
    		th_width = rect.right - rect.left;
    		element.remove();
    		if(th_width > old_th_width){new_th_width = th_width;}
    	});
    	$('.table_x th:first-child').css ('width',(new_th_width-23));	
        $('.expand').each(function(){var wi=$(this).parent().outerWidth()-3;$('.expand').width(wi)})
        $('.panel').height($(window).height()-4);
    }
     
    /*---------------------------------------------------------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------------------------*/
     
    function cellStatus(){
    	$(".table_x th").each(function(){
    	    var count      = 0;
    	    var indx_th    = $(this).index();
    	    var related_th = $(this);
    	    $(".table_x td:nth-child("+(indx_th+1)+")").each(function(){
    	        var element = $(this)
    	                      .clone()
    	                      .css({'display': 'inline', 'width': 'auto', 'visibility' : 'hidden',
    		                        'font-family': 'Lato','font-size':'11px','font-weight':'400',
    		                        'position': 'absolute','top':'0px','left':'0px','padding':'10px'
    		                  })
    	                      .appendTo('body');
    	        var rect1 = $(this)[0].getBoundingClientRect();
    	        var rect2 = element[0].getBoundingClientRect();
    			var td_minimized_width = rect1.right - rect1.left;
    			var td_maximized_width = rect2.right - rect2.left;		
    	        element.remove();
    	        if( td_maximized_width + 0.954 > td_minimized_width){if(! $(this).hasClass('truncated')){$(this).addClass('truncated');};count=1;}
    		    else{if($(this).hasClass('truncated')){$(this).removeClass('truncated');};}
    	    });
    	    if(count==1){
    		    if(!related_th.hasClass('expandable')){
    			    related_th.addClass('expandable');
    			    related_th.find('.expand').stop().fadeIn(400);
    			};
    		}
    	    else{
    		    if( related_th.hasClass('expandable')){
    			    related_th.removeClass('expandable');
    			    related_th.find('.expand').stop().fadeOut(400);
    			};
    		}
    	});
    }
     
    /*---------------------------------------------------------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------------------------*/
     
    function finalize(){
    	//Set search and buttons --------------------------------------------------//
     
        var ref= $('.menu').height() + $('.table_x').height()+49;
    	$('.affichage_biens').css	('top',ref)
    	$('.nouveau'		).css	('top',ref)
    	$('.nouveau'  		).fadeIn(0);
    	$('.affichage_biens').fadeIn(0);
    	$('.searchbox'		).fadeIn(0);
     
    	//Datatable Search -------------------------------------------------//  	
     
    	$('.search'			).keyup (function(){dataTable.search(this.value).draw();});
    	$('.search'			).focus (function(){if($('.search').val()=='Recherche'){$('.search').val('');};});
    	$('.search'			).blur  (function(){if($('.search').val()==''){$('.search').val('Recherche');};});
     
    	// Set table stuff-------------------------------------------------------//
     
    	$( 'body'           ).attr  ('unselectable','on').on('selectstart',false );
    	$( 'header'         ).attr  ('unselectable','on').on('selectstart',false );
        $('.container'      ).attr  ('unselectable','on').on('selectstart',false );
        $('.table_holder'   ).attr  ('unselectable','on').on('selectstart',false );
        $('.table_x' 	    ).attr  ('unselectable','on').on('selectstart',false );
        $('.table_expand'   ).attr  ('unselectable','on').on('selectstart',false ); 
    }
     
    /*---------------------------------------------------------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------------------------*/
     
    function getpanelData(){
    	    $.ajax({
            type    : 'GET',
            url     : 'php/ajax/get_panel_values.php',
            data    : 'value=1',
            dataType: 'json',
    		cache   : false
    	})
    	.done(function(response){
    		var k=0;
    			$('.panel_list').empty();
    			$.each(dataSet[0], function(key, value){	
    				active = key.substr(key.length - 1);
    				key= key.slice(0, -2);
    				var my_item = {};
    				my_item.title = key ;
    				if(k >0){
    					if((k >0) && (active >0)){
    						my_panel_entry = '<li class=  "ticked" data-columnindex="'+k+'"><div class="titre_pan">'+
    						    my_item.title+'</div><div class="tick_pan"></div></li>';
    					}
    					else{
    						my_panel_entry = '<li class="unticked" data-columnindex="'+k+'"><div class="titre_pan">'+
    						    my_item.title+'</div><div class="tick_pan"></div></li>';
    					}
    					$('.panel_list').append(my_panel_entry);
    				}
    				k++;
    			});	
    	})
    	.fail(function(err){alert("erreur ajax getpanelData :"+err.responseText);}); 
    }
     
    /*---------------------------------------------------------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------------------------*/
     
    function setTableOrder(str)
    {   
        $.ajax({
            type    : 'POST',
            url     : 'php/ajax/set_table_order.php',
            data    : 'value='+str,
            datatype: 'json',
    		cache   : false/*,
    		async   : false,
            success : function(response){}*/
    	});
    }
     
    /*---------------------------------------------------------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------------------------*/
     
    //panel Display ---------------------------------------------------// 	
     
    $(document).on('click','.affichage_biens',function(e){e.stopPropagation();
    	getpanelData();
    	if(panel_status==0){
    		$('.rideau'         ).css    ('display','block');
    		$('.rideau'         ).animate({opacity: 0.6}, 500, function() {});
    		$('.panel'          ).animate({right: "0px"}, 700, function() {});
    		$('.affichage_biens').animate({'margin-right': '+=55'}, 700, function() {});
    		$('.affichage_biens').text   ('Fermer');	
    		panel_status=1;
    	}
    	else{
    		$('.rideau'         ).animate({opacity: 0}, 500, function() {$('.rideau').css('display','none');});
    		$('.panel'          ).animate({right: "-250px"}, 700, function() {});
    		$('.affichage_biens').animate({'margin-right': '-=55'}, 700, function() {});
    		$('.affichage_biens').text   ('Affichage');
    		panel_status=0;
    	};
    });
     
    //panel Sortable --------------------------------------------------//  	
     
    $( ".panel_list" ).sortable({
    	placeholder: 'panel_highlight',
    	tolerance  : 'pointer',
    	axis       : 'y',
    	opacity    : 0.6,
    	cancel     : '.unticked',
    	start: function(event, ui){
    		dataTable.colReorder.enable(true);
    		$('.table_x th').css('background',"none")
    		.closest('table').find('th:contains("'+ui.item.text().trim()+'")')
    		.css('background-color','#4c3c49');
    		ui.item.css('background','#6a5466');
     
    	},
    	change: function(event, ui){
    		var from_ = $('.table_x th:contains("'+ui.item.text().trim()+'")').index()
    			,to_ = ui.placeholder.index();		
    		$('.table_x th').css('background',"none")
    		.closest('table').find('th:contains("'+ui.item.text().trim()+'")')
    		.css('background-color','#4c3c49');
     
    		dataTable.colReorder.move(from_,to_);
    	},
    	stop: function(event, ui){
    		ui.item.css({backgroundColor: "#212933" });
    		var str='Alias__';
    		$(".ticked").each(function(){str=str+$(this).text()+'__';})
    		setTableOrder(str);
    		dataTable.colReorder.disable(true);
    	}
    });	
     
    /*---------------------------------------------------------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------------------------*/

  10. #10
    Membre à l'essai
    Inscrit en
    octobre 2007
    Messages
    32
    Détails du profil
    Informations forums :
    Inscription : octobre 2007
    Messages : 32
    Points : 19
    Points
    19

    Par défaut

    Citation Envoyé par Toufik83 Voir le message
    J'ai modifié beaucoup de choses dans ton code js, parce que j'ai vu que tu utilises $.ajax en async:false, et ça je ne te conseil pas de le faire parce que pendant qu'ajax est entrain de faire le traitement, le navigateur reste bloqué jusqu'à ce que le résultat soit présente et c'est peut être pour ça que tu as une erreur de déplacement de colonne.

    essaie de supprimer tout les async:false de ton code, et au lieu de mettre ton code dans success/error, utilise .done/.fail
    Ok, merci pour le tuyau et les modifications! Je ferai ça à l'avenir, c'est cool.
    Cela optimise le code et c'est super. Cela dit, il n'y a pas de requête AJAX lors du "change", donc je doute que cela ait une influence sur mon problème. Il y en a un lors du stop mais le stop arrive après le problème.
    Par contre, dans mon message précédent ci-dessus, je considère le problème comme venant de la position du placeholder. J'ai l'impression que ça bouffe en ressources.
    Je vais tenter de voir comment éviter des requêtes sur la position du placeholder (alors même que j'en ai impérativement besoin, donc ça va être chaud!).

    PS: j'ai édité mon dernier message, il y a toutes les infos sur la problématique.

  11. #11
    Membre expérimenté Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    844
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : Maroc

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

    Informations forums :
    Inscription : janvier 2012
    Messages : 844
    Points : 1 353
    Points
    1 353

    Par défaut

    Salut,
    c'est vrai que mon premier test était seulement avec 4 colonnes, mais après que j'ai vu ton message j'ai ajouté d'autres colonnes (19 au complet) et je n'ai pas le décrochage de colonne pendant le déplacement.

    sinon tu peux aussi utiliser l'attribut "data-column-index" de chaque th, au lieu de contains
    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    var column_index=ui.item.attr("data-columnindex")
    ,from_ = $('.table_x th[data-column-index="'+column_index+'"]').index()//chaque th contient un attribut data-column-index
    ,to_ = ui.placeholder.index();

    Il y a aussi le css que tu dois modifier pour .panel li et .titre_pan et .ticked .tick_pan
    Code css : 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
     
    .panel li{
    	height:39px;
            text-align: left;vertical-align: middle;/*je viens d'ajouter ça*/
    	border-bottom:1px solid #454d5a;
    	line-height:39px;
    	padding-left:8px;
    	background: #212933;
    	z-index:10000001;
    }
    .titre_pan{
    	height:39px;
    	width:calc(100%-46px);display: inline-block; /* ajouté aussi */
    }
    .ticked .tick_pan{
    	height:39px;
    	width:46px;
    	float:left;
    	background: url('../medias/interface/led_green.png') no-repeat center center;
    	display:inline-block;/* ajouté */
    }

  12. #12
    Membre à l'essai
    Inscrit en
    octobre 2007
    Messages
    32
    Détails du profil
    Informations forums :
    Inscription : octobre 2007
    Messages : 32
    Points : 19
    Points
    19

    Par défaut

    Bonjour et merci Toufik83 pour les dernières infos!

    J'ai pris du temps avant de répondre car je voulais d'abord bien comprendre le problème et en faire un jsFiddle minimal, en tenant compte de tes remarques (penser en termes de data attributes).
    Ce que j'ai fait.

    https://jsfiddle.net/yhp3m6L8/2/

    Tu verras maintenant clairement le problème et son scope.
    En effet, il n'y a maintenant aucune Datatable, aucun appel Ajax, et aucune fonction inutile, juste le sortable et une liste.

    Le script jsFiddle se décompose en deux parties:

    1) la partie utile qui permet de tracker le déplacement (sortable a une manière bizarre de rendre compte des index et donc il faut un minimum de code pour pister le bon index).
    2) la partie "console" qui n'a aucun impact dans le fonctionnement du script MAIS permet de voir le bug de manière claire.

    Si tu montes et descends un élément d'une liste, tu verras dans la partie inférieur de l'écran, l'index associé à la nouvelle position de l'élément s'afficher en noir. En toute logique, ces index DOIVENT se suivre par soucis de traçabilité (je compte là-dessus) et c'est ce qu'il se passe quand la souris se déplace à vitesse normale.

    Mais si tu bouges la souris rapidement lors du déplacement, les index sautent et ne se suivent plus directement. J'ai rendu cela visible en affichant en ROUGE les index qui décrochent et ne suivent donc plus la valeur précédente.
    Le "change" ne rend alors plus compte de toutes les transitions et donc ça me créée du souci. Le décrochage dans mes dataTables sur mon serveur s'explique alors parfaitement.

    Nom : Sans titre 2.png
Affichages : 11
Taille : 123,4 Ko

    C'est donc bien une affaire de Sortable et de rien d'autre.
    Et ici, il me semble que le code est minimal et n'est pas buggué.
    Pour moi, il n'y a que deux options:

    1) le change n'est pas assez réactif pour récupérer l'info en temps réel à haute vitesse.
    2) quand la souris se déplace vite, l'élément de la liste prend un certain temps avant de la rejoindre "physiquement" (l'élément n'est donc plus TOUJOURS en dessous de la souris). Ce qui fait que le change fonctionne bien mais récupère une mauvaise valeur.

    Je n'ai pas de solution mais au moins, j'ai limité le périmètre du problème.

    Qu'en penses-tu/ qu'en pensez-vous?

    PS: j'ai tenu compte de toutes tes recommendations dans mon script perso. Merci!

Discussions similaires

  1. [VB.NET][ADO]Fusionner des dataTables
    Par neo.51 dans le forum Windows Forms
    Réponses: 5
    Dernier message: 30/07/2005, 00h22
  2. [C#] Requete entre deux DataTables
    Par pc152 dans le forum Accès aux données
    Réponses: 2
    Dernier message: 02/09/2004, 11h24
  3. [VB.NET] Suppression de ligne dans un DataTable
    Par seemax dans le forum Windows Forms
    Réponses: 7
    Dernier message: 06/05/2004, 14h19
  4. Réponses: 2
    Dernier message: 20/02/2004, 08h47
  5. Réponses: 3
    Dernier message: 21/05/2003, 11h44

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