Datatable et insertion en milieu de tableau

Version imprimable

Bonjour à tous,

Depuis plusieurs jours j'essaie d'insérer une ligne à l'intérieur d'une table datatable. J'utilise bien évidemment la fonction addData(), mais pas moyen de faire autrement que de générer une ligne en fin de tableau.

J'ai lu tous les commentaires d'Allan sur le site de datatable, mais soit je suis C..:aie: soit y a un problème. Je n'arrive pas à récupérer les index des lignes et à les modifier avant de faire un reDraw().

J'ai même essayer de créer une ligne en fin de tableau et la faire remonter ligne par ligne mais là aussi cela ne fonctionne pas .

voici le code de cette dernière idée:
Code:

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 function insertTablo(){ var arr = $('#example tbody tr.row_selected'); for(var i=0; i<3; i++) { var tr = arr[i]; var row = $(tr); // ligne à bouger. var prevRow = $(tr).prev(); // la ligne à déplacer doit être remplacée par celle qui la précède /* Si la ligne à bouger est déjà en première position */ if(prevRow.length==0){ break; } moveDataUp(row, prevRow); moveVisualSelectionUp(row, prevRow); } } function moveSelectedUp(){ var arr = $('#example tbody tr.row_selected'); for(var i=0; i<arr.length; i++) { var tr = arr[i]; var row = $(tr); // ligne à bouger. var prevRow = $(tr).prev(); // la ligne à déplacer doit être remplacée par celle qui la précède /* Si la ligne à bouger est déjà en première position */ if(prevRow.length==0){ break; } moveDataUp(row, prevRow); moveVisualSelectionUp(row, prevRow); } } function moveVisualSelectionUp(row, prevRow){ row.removeClass("row_selected"); prevRow.addClass("row_selected"); }
La ligne est créée mais ne bouge que d'une ligne:(

J'utilise la version 1.9 de datatable et jquery 1.7.1

ESt-ce que vous auriez une idée pour améliorer ce code ou pour m'expliquer comment insérer une ligne dans le tableau?

Merci de votre aide

25/06/2014, 22h54
NoSmoking

Bonjour,
j'ai un peu de mal à comprendre ta démarche!

L'utilisation de DataTables fait que tu ne maitrises plus forcément l'ordre des données que tu mets en TABLE.

Vouloir insérer une ligne à la position x ne te garantie aucunement que le .draw() te l'affichera à la place voulue.

Le .add() insère dans la "base interne" les données mais n'affecte en rien l'affichage, c'est .draw() qui s'en charge, qui lui est fonction des options de tri initialisées.

Tu dois pouvoir ruser en ajoutant une colonne qui te permet de définir un ordre de tri particulier.
27/06/2014, 18h19
FadeToBlack

Bonsoir NoSmoking et bonsoir à tous,

JE comprends bien ce que tu veux dire. En fait, mes lignes de tableaux ont une colonne de "compte" genre : 001, 002, 003 etc...

Cette colonne s'incrémente lorsque j'ajoute une ligne avec la fonction .add() ou addData(). J'arrive à faire en sorte que deux lignes échange de place. LEs numeros de ligne se mettent à jour dans ce cas là.

Ce que je n'arrive pas à faire c'est insérer une ligne dans le tableaux. Si je mets une ligne à la fin avec un numéro correspondant au milieu, je n'arrive pas à réindexer le tout ou à retrier.

Je ne sais pas si je suis plus clair.

Merci pour ton aide
29/06/2014, 10h40
NoSmoking

Citation:

Si je mets une ligne à la fin avec un numéro correspondant au milieu, je n'arrive pas à réindexer le tout ou à retrier.

aucune raison si la clé de tri est bien définie.

Citation:

J'arrive à faire en sorte que deux lignes échange de place.

comment procèdes tu?
Attention c'est la "base de données" qu'il faut modifier pas le DOM dans le cas d'une modification du DOM il faut d'abord détruire la "base de données" avant de la recréer pour prise en compte des modifications du nouveau DOM.

Salut NoSmoking,

En fait, je n'ai pas de base de données qui recueille les éléments de mon tableau. Cette appli ne sert qu'à insérer des données dans un formulaire. Le tableau final est ensuite exporté en csv, à la personne qui l'a créé et sur le serveur où des collègues s'en servent pour leur traitement.

Voici la construction du tableau dans index.php

Code:

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
 
$(document).ready(function() {
    oTable = $('#example').dataTable({
            "bJQueryUI": true,
            "bSort": false,                
            "iDisplayLength": 10,
            "aLengthMenu":[[10, 25, 50, 75, -1], [10, 25, 50, 75, "Tous"]],
            "bAutoWidth":false,
            "bStateSave": true,
    		"bPaginate":true,
            "sPaginationType": "full_numbers",
            "oLanguage":{ "sUrl": "lang/dataTables.french.txt"},
            "bProcessing": true,
            "aoColumns": [
            {"sTitle":"Num" },
            {"sTitle": "Document"},
            {"sTitle": "MODE"},
            {"sTitle": "TYP"},
            {"sTitle": "h dep"},
            {"sTitle": "h arr"},
            {"sTitle": "tps myen"},
            {"sTitle": "tps tot"}],
            "sAjaxSource": "http://localhost/appli/functions/csvToJSON.php?pp="+rec("pp"),
            "sDom": '<"H"Tlfr>t<"F"ip>',
            "oTableTools": {
                "aButtons": [
                    {
                        "sExtends":    "copy_to_div",
                        "sButtonText": "copie",
                        "sDiv":        "copy",
                        "sInput":        "csv_text"
                    },
                    {
                        "sExtends": "xls",
                        "sButtonText": "Excel"
                    },
                    {
                        "sExtends": "pdf",
                        "sButtonText": "PDF"
                    },
                    {
                        "sExtends": "print",
                        "sButtonText": "Imprimer",
                        "sInfo":"<h6>Aperçu avant impression</h6>"
                    }
                ],
 
                "sPrintMessage": "",
                "sSwfPath": "swf/copy_cvs_xls_pdf.swf"
            },
            "fnCreatedRow": function(nRow){
                $(nRow).attr("class", "even");
            },
 
        });

En gros voici le code pour l'échange entre deux lignes dans un fichier functions.js

Code:

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
 
 
function moveSelectedDown(){
    var arr = $('#example tbody tr.row_selected'); 
 
    for(var i=0; i<arr.length; i++) {           
        var tr = arr[i];           
        var row = $(tr);               // ligne à bouger.
        var nextRow = $(tr).next();    // la ligne à déplacer doit être remplacée par celle qui la suit
 
 
        /* Si la ligne à bouger est déjà en première position */
        if(nextRow.length==0){  break; }   
 
        moveDataDown(row, nextRow);
        moveVisualSelectionDown(row, nextRow);
    }  
}
 
function moveDataDown(row, nextRow){     
    var movedData = oTable.fnGetData(row[0]).slice(0);    // copie de la ligne à bouger.
    var nextData = oTable.fnGetData(nextRow[0]).slice(0); // Copie de la ligne ancienne pour la replacer sous la ligne consernée.
 
    // switch data around :)
    oTable.fnUpdate([nextData , row[0], 0, false, false]); 
    oTable.fnUpdate([movedData , nextRow[0], 0, true, true]);
 
    oTable.fnStandingRedraw();
 
    // On réindex les lignes
    fnReorderId();
 
    // On réinitialise le flag
    flag = false;
 
}
 
function moveVisualSelectionDown(row, nextRow){
    row.removeClass("row_selected");
    nextRow.addClass("row_selected");
}
 
/*
 * Fonction permettant 
 * de réindexer les lignes
 */ 
function fnReorderId(){
 
    // On recupere la configuration général du tableau
    oSettings = oTable.fnSettings();// On recupere la configuration général du tableau
 
 
    // On récupère les lignes du tableau
    var rows = $(oSettings.aoData);
    var counter = 1;
 
    // On parcourt chaque ligne et on réindexe les lignes
    rows.each(function ()
    {
        oTable.fnUpdate( sprintf("%03d",counter), counter-1, 0 , false);
        counter++;
    });
 
    // On redessine le tableau en prenant en compte les préférences d'affichage
    oTable.fnStandingRedraw();
}

Là tout fonctionne parfaiement. Pour ce qui est d'insérer un ligne ayu milieu du tableau j'avais pensé faire :
1) ajout d'une nouvelle ligne
2) modification de tous les éléments à partir de l'endroit où je veux insérer la lignes avec une for etc...
3 modification de la dernière ligne
4) réindexation de toutes les lignes et re-dessinage(???) du tableau.

Ma manipulation fonctionne à peu près bien jusqu'au pour 3. La 4 foire. Je me demande si je n'est pas un problème sur l'index de chaque ligne. Du coup j'essaie d'utiliser un truc qui serait fnGetRowIndex() mais je bloque à ce niveau.

merci de ton aide

29/06/2014, 16h58
NoSmoking

Quand je parle de "base de données" je parle de l'objet DataTable créé par le plugin et mis à jour à chaque fois que tu fais un addRow.

Il te faut après ajout de ta ligne faire un reDraw puis modifier l'ordre dans le DOM, après modification du DOM tu détruis l'objet oTable pour le recréer avec le nouvel ordonnancement de la TABLE.
30/06/2014, 15h13
FadeToBlack

SAlut,

Ok je vois ce que tu veux dire. Je vais faire un essai et je te tiens au courant. Mais penses tu que ma démarche d'insérer une nouvelle ligne en fin de tableau puis de la déplacer x fois, grace à une boucle est la meilleur solution? Ou existe-t-il une autre issue.

Bonne journée et merci de ton aide

Citation:

Mais penses tu que ma démarche d'insérer une nouvelle ligne en fin de tableau puis de la déplacer x fois, grace à une boucle est la meilleur solution? Ou existe-t-il une autre issue.

il existe les méthodes .before() et .after() qui peuvent être appliquées.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>.before()</title> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <table border> <tr><td>Ligne 1</td></tr> <tr><td>Ligne 2</td></tr> <tr><td>Ligne 3</td></tr> <tr><td>Ligne 4</td></tr> <tr><td>Ligne 5</td></tr> </table> <script> var oTable = $('table').eq(0), oLigne = oTable.find('tr'); // deplace la dernière ligne en position 2 oLigne.eq(1).before( oLigne.eq(-1)); </script> </body> </html>
[EDIT]
Vu en parcourant le reste du forum http://www.developpez.net/forums/d14...m/#post7875260