Discussion :

[Toufik83]

Ce n'est pas comme ça qu'on ajoute un élément au DataTable, voir l'exemple 3 de la documentation.

Dans ce cas il faut ajouter un objet dans columnDefs et préciser surtout la position de la colonne dans targets :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
 columnDefs: [
     {
         "targets": hiddendataJourCol,
         visible: false
      },
      {
          "data": null,//pas de data pour cette colonne, c'est un input qui sera ajouté avec defaultContent au dessous
          "defaultContent": "<input type='text'  style= 'background-color:inherit;text-align:center;width:50px !important' />",
          "targets": /* ici tu mets l'index de la colonne, si elle est la 7ème, tu dois mettre 6 ici, car ça commence de 0 */
      }
],

comme tu vois y'a plus de id pour la zone de texte qu'on vient d'ajouter, ajoutes plutôt un name à ton input car un id doit être unique...

[usrprs]

Toufik merci pour ta réponse,

je n'ai pas réussi à implementer ta solution, par contre j'ai contourner le probleme en ajoutant une colonne a tempdata

Code :

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

1
2
                    //Ajouter le champs de saisie du plan d'action
                    tempData["Action"]="<input type=text>";

Ca marche et après je déplace ma colonne avec :

Code :

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

datatable_.colReorder.move( 1, 81 );

Ca c'est bon par contre j'essai de formater mes montants avec deux décimal et le signe euro :

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
            datatable_ = $('#datatable').DataTable({
                language: {
                decimal: ",",
                thousands: "."
                },
                colReorder: true,
                data: dataForTable,
                columns: header,
                columnDefs: [
                    {
                        "targets": hiddendataJourCol,
                        visible: false
                    }
                ],
                deferRender: true,
                scrollX: 800,
                scroller: {
                    rowHeight: 11
                },
                "lengthMenu": [[10, 20, 50, 100, -1], [10, 20, 50, 100, "Tout"]],
                "pageLength": 20,
                'rowCallback': function (row, data, index) {
                    for (var i = nbColWithoutdataJour; i < nbColWithoutdataJour + 6; i++) {
                        var sColor = "";
                        switch (data[header[i + hiddendataJourCol.length].data]) {
                            case "Absent":
                                sColor = "yellow";
                                break;
                            case "Present":
                                sColor = "green";
                                break;
 
                            case "En rupture":
                                sColor = "red";
                                break;
 
                            default:
                                sColor = "yellow";
                                break;
                        }
                        $(row).find('td:eq(' + i + ')').css('background-color', sColor);
                    }
                }
            });

Mais ça ne marche pas, mon champs dans la table est pourtant un varchar, t'aurais une idée ? une erreur de syntaxe peut-etre ?

[Toufik83]

Ca c'est bon par contre j'essai de formater mes montants avec deux décimal et le signe euro

Est-ce que la valeur de l'input text que tu vient d'ajouter existe dans la table mysql ? de quel montant parles-tu?

[usrprs]

Toufik, la valeur de l'input text n'existe pas dans la base mysql (ce n'est pas nécessaire de le stocker c'est envoyé dans un pdf)

La colonne qui contient le montant est c'est que j'ai ajouter en début de topic manqueagagner et qui a été ajouté dans ma table mysql. Elle s'est ajouté automatiquement dans mon tableau après correction du json C'est celle la que je veux formater en euros

Merci

[Toufik83]

Ok, dans ce cas il faut utiliser le callback render afin de personnaliser l'affichage de la valeur :

Code :

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

1
2
3
4
5
6
7
 
columnDefs:[
     {.....}
    ,{
        targets :/* index de la colonne dans data */,
	render:$.fn.dataTable.render.number( '.', ',', 2,'', ' €' )
}]

Ensuite, et si je n'exagères pas, je ne suis toujours pas d'accord avec toi concernant la façon que tu as procédé pour ajouter la zone de texte, et je pense que tu auras un problème lors de la récupération de sa valeur, parce que normalement lorsqu'on veut personnaliser des colonnes c'est dans columnDefs ou columns qu'il faut faire la modification et pas ailleurs.

Si tu visualises la valeur de head et value avec un console.log, ça donne quoi ? :

Code :

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

1
2
3
4
5
 
$.each(dataForTable[0], function (head, value) {
       console.log("head :",head,", value :",value );//retourne quoi ?
       header.push({"data": head, "title": head});
});

[usrprs]

Toufik,

merci beaucoup ça marche pour le format en euros.

En effet le console log head value ne retourne rien mais j'accède à la valeur saisie de cette manière :

Code :

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

1
2
if ($("#idaction" + $(tr).children("td").eq(0).text()).val() != "" && i != 0) {
                console.log("valeur saisie: " + $("#idaction" + $(tr).children("td").eq(0).text()).val());

Et a la création des champs de saisie j'ai crée un id en concaténant une chaine avec une référence unique :

Code :

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

1
2
                    //Ajouter le champs de saisie du plan d'action
                    tempData["Action"]="<input type=text id=idaction" + tempData['RefdriveEAN'] + ">";

est-ce que tu penses qu'avec cette méthode je risque d'avoir des problèmes ? la pour le moment ça a l air de marcher.

Merci a toi

[Toufik83]

En effet le console log head value ne retourne rien mais

Ce n'est pas possible, car ce sont les éléments de header construisant le <thead> de la table HTML et je suppose que c'est un tableau d'objet comme suite :
header=[{},{},{},{}...]; et chaque objet est sous forme {"data":"valeur de data","title":"valeur de title"}, et c'est ici qu'il faut chercher l'élément de la colonne en question afin d'ajouter defaultContent et initialiser data à null pour que cela devient :[{"data":null,"title":"valeur de title","defaultContent":"<input type='text' />"},{},...]

[usrprs]

En fait quand je dis que ça ne retourne rien c'est juste pour la colonne qui contient les inputs.

Par contre pour les autres colonnes j'ai bien les valeurs dans le console log.

du coup je suis un peu perdu.

[Toufik83]

C'est ce que je disais, cela ne te retourne rien parce que les données de la colonnes ont été mal initialisées, on va essayer de personnaliser la colonne manuellement après la boucle :

Code :

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

1
2
3
4
5
6
 
$.each(dataForTable[0], function (head, value) {
    header.push({"data": head, "title": head});
});
/*Ajouter la colonne Action a header */
header.push({data:null,title:"Action",defaultContent:"<input type='text' />"});

[usrprs]

Toufik, j'ai fais la modif ci-dessus mais le soucis c'est que la colonne action n'est pas dans le head car elle n'est pas présente dans la base de données.

Et sin on essaie d'ajouter la nouvelle colonne dans column du datatable ?

[Toufik83]

Justement, il faut l'ajouter dans header, car la valeur de columns est header columns: headerC'est ce que j'essaies de t'expliquer depuis toute à l'heure.