Synchroniser la suppression d'un identifiant

**Zalawy** · 07/06/2019, 17h02

Bonjour,

J'espère que je suis au bon endroit pour exposer mon problème. Pour commencer, la partie de frontend que le tableau où la liste des logins et mot de passes, l'opération est déjà prévu pour la modification. Et j'utilise le web service pour communiquer et échanger les données. Je souhaite d'ajouter une nouvelle action : supprimer un identifiant. Le niveau de WS fonctionne à merveille. Mais au niveau de front, j'ai dû mal à insérer le bout de code pour supprimer un identifiant lequel j'ai pu référencer une méthode SupprimerUnIdentifiant de WS.

Voici le script sur la modification suivant : La balise en gras : j'ai ajouté un bouton, Delete et ce dernier affiche bien

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
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
// Chargement de toutes les identifiants
function chargerIdentifiant() {
    $.ajax({
        url: 'Api/ApiParamHabilitation.asmx/ChargerParamIdentifiants',
        type: 'POST',
        contentType: "application/json",
        dataType: 'json',
        success: function (response) {
            var jsonD = jQuery.parseJSON(response.d);
            var items = jsonD.DonneesSortie;
            var t = $('#maTable').DataTable();
            $.each(items, function (i, item) {
                t.row.add([
                   '' + item.Login,
                    '' + item.MotDePasse,
                    '<button type=\"button\" class=\"data-popup-open btn btn-secondary\"  data-popup-open=\"popup-1\">Edit</button> <button type=\"button\" class=\"data-popup-openD btn btn-secondary\" style=\"background-color:blue;\" data-popup-open=\"popup-2\">Delete</button>', 
                ]).draw();
            });
            console.log('Statut Chargement:' + jsonD.Statut);
        },
        error: function (response) {
            var jsonD = jQuery.parseJSON(response.d);
            console.log('Statut Chargement:' + jsonD.Statut);
        }
    });
}

//Cliquer le bouton Edit pour faire un popup de modification
$(window).load(function () {
    var idEvalActuelle = "";
    var table = $('#maTable').DataTable();
    $('#maTable tbody').on('click', 'tr', function () {
        var data = table.row(this).data();

        $('#Login').val("" + data[0]);
        $('#MotDePasse').val("" + data[1]);
        idEvalActuelle = data[0];

        var that = $('[data-popup-open]');
        var targeted_popup_class = jQuery(that).attr('data-popup-open');
        $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
    });

    //Cliquer pour fermer le popup
    $('[data-popup-close]').on('click', function (e) {
        var targeted_popup_class = jQuery(this).attr('data-popup-close');
        $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);

        e.preventDefault();
    });
	
	//Valider la modification 
    function confirmerModification() {
        var donneesLg = $("#Login").val();
        var donneesPwd = $("#MotDePasse").val();
        $.ajax({
            url: 'Api/ApiParamIdentifiant.asmx/ModifierUnLogin',
            type: 'POST',
            contentType: "application/json",
            dataType: 'json',
            data: JSON.stringify({
                donneesEntree: idEvalActuelle + "," + donneesLg + "," + donneesPwd,
            }),
            success: function (response) { //Retour la modification succès ou échoué
                var jsonD = jQuery.parseJSON(response.d);
                messageModification = jsonD.DonneesSortieModif;
                alert(messageModification);
                location.reload(true);
            },
            error: function (response) {

                fail(response);
            }
        });

        function fail(reponse) {
            var jsonD = jQuery.parseJSON(response.d);
            console.log("Statut Modification identifiat:" + jsonD.Statut);

        }
    }

    $('#Buttonvalider').click(function () {
        $('.popup-inner').hide();
        confirmerModification();
    });

    // Le curseur au niveau du menu
    var elt = $('#Identifiant');
    $('#Acceuil').removeClass("active");
    $('#Parametres').removeClass("active");
    $('#Deconnexion').removeClass("active");
});


// Pour la Datatable
function applyDatatable() {
    $('#maTable').DataTable({
        language: {
            processing: "Traitement en cours...",
            search: "Rechercher :",
            lengthMenu: "Afficher les menus",
            info: "Affichage de l'element",
            infoEmpty: "Affichage de l'element sur des elements",
            infoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
            infoPostFix: "",
            loadingRecords: "Chargement en cours...",
            zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
            emptyTable: "Aucune donnée disponible dans le tableau",
            paginate: {
                first: "Premier",
                previous: "Pr&eacute;c&eacute;dent",
                next: "Suivant",
                last: "Dernier"
            },
            aria: {
                sortAscending: ": activer pour trier la colonne par ordre croissant",
                sortDescending: ": activer pour trier la colonne par ordre décroissant"
            }
        }
    });
}

$(document).ready(chargerIdentifiant(), applyDatatable(), function () {

});

Le script pour modification d'un identifiant qui lie au script ci-dessus, ce qui pourra vous comprendre mieux :

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
 
    <%-- PopUp--%>
    <div class="popup" data-popup="popup-1" style="display: none">
        <div class="popup-inner">
            <h2 id="nomH2">Modifier un identifiant</h2>
            <div id="editDiv" class="form-group">
                <textbox class="popMarge">Login</textbox>
                <input type="text" id="Login" class="popMargeInput" />
            </div>
            <div class="form-group">
                <textbox class="popMarge">Mot de passe</textbox>
                <input type="text" id="MotDePasse" class="popMargeInput" />
            </div>
            <button class=" btn btn-secondary popMarge" id="Buttonvalider">Valider</button>
            <button class=" btn btn-secondary popMarge" id="ButtonAnnuler" data-popup-close="popup-1">Annuler</button>
            <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
        </div>
    </div>

Mais au moment de synchroniser la suppression d'un identifiant, je suis un peu perdu avec le script en ajax, j'ai essayé d'ajouter un popup mais ça n'a pas effet. C'est DataTable que j'utilise. J'ai lu le tuto : https://datatables.net/reference/api/row().delete()
J'ai dû mal à distinguer la différence : row().delete() et row.remove()
Ce serait génial si vous m'éclairez/vous m'aidez mon problème.
Merci à l'avance.

**Toufik83** · 07/06/2019, 17h41

Salut,
désolé mais je n'arrives pas à comprendre quel est le problème exactement ?

**Zalawy** · 07/06/2019, 17h51

Je remercie de votre réponse, je travaille sur un projet et la modification est déjà prévu. Je veux ajouter une opération : supprimer un identifiant.
Comment insérer le script pour supprimer un identifiant qui est sur le tableau (les codes que j'ai indiqué s'agissent la modification)?

**SpaceFrog** · 07/06/2019, 18h17

Sur le callback de l'ajax repeuple le tableau à partir de la réponse du serveur ? ou fais un remove de la ligne supprimée ?

**Zalawy** · 07/06/2019, 18h30

Merci pour votre réponse, si je ne suis pas sûre d'avoir bien compris par "callback de l'ajax repeuple le tableau à partir de la réponse du serveur", pouvez vous m'expliquer?

**Toufik83** · 08/06/2019, 08h46

Salut,

Enlève les deux fonctions qui sont au début de document.ready et remets les à l'intérieur :

Code :

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

1
2
3
4
5
6
 
$(document).ready(  function () {
    chargerIdentifiant();
    applyDatatable();
    //copies ici tout le code qui est à l'intérieur de $(window).load et supprime cette dernière.
});

J'ai vu que window.load provoque une erreur dans la console => Uncaught TypeError: url.indexOf is not a function jquery-3.1.1.js:9793 et empêche l'exécution du script js.

Si tu l'as fait, tu verras maintenant que l'événement clic sur les <tr> de DataTable est bien appliqué, reste maintenant à savoir si tu as des id dans ton objets json pour identifier les <tr> ou non, si tu ne les a pas, tu peux soit les créer manuellement ou utiliser seulement les index des <tr> 0,1,2,3, mais à mon avis avec des id c'est plus propre, parce que tu seras obliger de supprimer les items du fichier json renvoyé par ton API.

Ce que j'ai fais moi, c'est créer un fichier php qui retourne du json comme suite :

Code php :

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

1
2
3
4
5
6
7
8
9
 
<?php
$d=[
	"d"=>["DonneesSortie"=>[]]
];
for($i=0;$i<10;$i++){
     $d["d"]["DonneesSortie"][]=["DT_RowId"=>($i+1),"Login"=>"login ".($i+1),"MotDePasse"=>"Pass ".($i+1) ];
}
echo json_encode($d);

Quand j'inspecte les <tr>, les id sont bien là, 1,2,3...10.

Après j'ai modifié un peu le each du "success" de la fonction chargerIdentifiant() comme suite :

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
 
success: function (response) {
            var jsonD = response.d;//pas besoin d'utiliser $.parseJSON() parce que tu as déjà mis dataType:"json" dans les paramètres d'ajax
            var items = jsonD.DonneesSortie;
            var t = $('#maTable').DataTable();
            $.each(items, function (i, item) {
                t.row.add([
                   item.Login,
                   item.MotDePasse,
                   "<button class='data-popup-open btn btn-secondary' style='background-color:yellow;color:black' data-popup-open='popup-1'>Edit</button>"
		   +"<button class='data-popup-openD btn btn-secondary' style='background-color:red;color:white' data-popup-open='popup-2'>Delete</button>"
		])
                 .node().id=item.DT_RowId;
		t.draw(false);
	   });
	  console.log('Statut Chargement:' + jsonD.Statut);
        }

Maintenant il te faut attacher l'événement clic aux boutons "Delete" et "Edit" et pas aux <tr>, et je ne pense pas que tu es obliger de créer un popup pour chaque action (Delete,Edit), un seul suffira et tu n'as qu'à changer seulement le titre du popup (soit Supprimer ou Modifier), exemple :

Code html :

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
 
<div class="popup" id="popup_" data-popup="popup-1" style="display: none">
        <div class="popup-inner">
            <h2 id="nomH2">Ce texte changera dynamiquement selon l'action (edit ou delete)</h2>
            <div class="form-group">
                <label class="popMarge">Login</label>
                <input type="text" id="Login" class="popMargeInput" />
            </div>
            <div class="form-group">
                <label class="popMarge">Mot de passe</label>
                <input type="text" id="MotDePasse" class="popMargeInput" />
            </div>
            <button class=" btn btn-secondary popMarge" id="Buttonvalider">Valider</button>
            <button class=" btn btn-secondary popMarge" id="ButtonAnnuler" data-popup-close="popup-1">Annuler</button>
            <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
        </div>
    </div>

Ne pas oublier de supprimer la fonction de clic sur les tr et la remplacer par ce code :

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
 
        //ouvrir le popup-open
	$('#maTable').on('click','.btn', function () {
		var targeted_popup_class = $(this).attr('data-popup-open')
		, id_tr=$(this).closest('tr').attr('id')
		, data = table.row($(this).closest('tr')).data();
 
                idEvalActuelle = data[0];
                $('#popup_')
		.attr({"data-popup":targeted_popup_class,"data-id-tr":id_tr})//attribution de data-popup et data-id-tr pour #popup_
		.find('#nomH2')
                .text(targeted_popup_class=="popup-1"?"Modifier un Identifiant":"Supprimer un identifiant")//modification du titre selon l'action
		.next()
		.find("#Login").val("teste "+data[0])
		.parent()
		.next()
		.find('#MotDePasse').val(data[1])
		.closest('.popup-inner')
		.find('#ButtonAnnuler,.popup-close')
                .attr('data-popup-close',targeted_popup_class)//attribuer targeted_popup_class à 2 éléments, le <bouton> et le <a class="popup-close">
		.closest('#popup_')
		.fadeIn(350);
 
		console.log('data-popup :'+targeted_popup_class+', id tr clicked :'+id_tr
		+', button clicked :'+targeted_popup_class,' data[0] :',data[0]);
	});

Il te faut aussi ajouter la variable data_id_tr dans data d'ajax de la fonction confirmerModification() :

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
 
function confirmerModification() {
        var donneesLg = $("#Login").val();
        var donneesPwd = $("#MotDePasse").val();
	var data_id_tr=$("#popup_").attr('data-id-tr');
	console.log('le id tr est :',data_id_tr);//vérifie bien que tu as le bon id dans la console !
          $.ajax({
            .....,
            data: JSON.stringify({
                donneesEntree: idEvalActuelle + "," + donneesLg + "," + donneesPwd + "," + data_id_tr 
            }),
            success: function (response) { //Retour la modification succès ou échoué
                var jsonD = response.d;
                messageModification = jsonD.DonneesSortieModif;
                console.log(messageModification);
                //location.reload(true); pas de reload ici, sinon ajax ne sert à rien !!!
                //si l'action est "suppression", tu supprimes directement le <tr> avec son id qui a été stocké dans data-id-tr de #popup_ 
                //$('#maTable tbody tr#'+data-id-tr).remove();
            },
            //le reste du code....
        });
 
        function fail(reponse) {
            var jsonD =response.responseText;//les erreurs json sont sauvegardées dans "responseText"
        }
    }

Et finalement le bouton valider qui permet de modifier ou supprimer un identifiant :

Code :

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

1
2
3
4
5
 
$('#Buttonvalider').click(function () {
        $('#popup_').hide();//on cache le #popup_ au complet, pas seulement ".popup-inner"
        confirmerModification();
    });

**Zalawy** · 08/06/2019, 21h25

Toufik83 : Je te remercie pour la réponse rapide et je n'ai pas pu afficher le popup, je n'y comprends pas et pourtant, il n'y a pas des messages d'erreurs....

**Toufik83** · 08/06/2019, 22h42

Salut,
tu es sûr ? parce que j'ai testé en local et pour moi ça marche, le popup est bien affiché lorsqu'on clic sur Edit ou Delete.

Ce qui est très gênant c'est que tu ne vas pas pouvoir profiter de presque toutes les fonctionnalités de DataTable (recherche, pagination, trie de colonnes..), parce que DataTable exige une variable "data" qui doit être renvoyée par le fichier serveur, alors que toi tu utilises "d.DonneesSorties".

La solution c'est de reconstruire ton objet json et tu ajoutes tout les items de "d.DonneesSorties" dans "data".

**Zalawy** · 12/06/2019, 18h18

Bonjour,

Toufik83 : je te remercie pour la réponse rapide, malheureusement oui, cela n'a pas fonctionné, c'est à dire qu'il n'y a pas une action au moment de cliquer la modification/la suppression et pourtant je n'ai pas les messages d'erreur.

Code php :

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

1
2
3
4
5
6
7
8
<?php
$d=[
	"d"=>["DonneesSortie"=>[]]
];
for($i=0;$i<10;$i++){
     $d["d"]["DonneesSortie"][]=["DT_RowId"=>($i+1),"Login"=>"login ".($i+1),"MotDePasse"=>"Pass ".($i+1) ];
}
echo json_encode($d);

Pour l'information, je veux te préciser que je ne préfère pas d'ajouter le fichier php pour id d'où ton guide de code ci-dessus.
Est-ce que c'est vraiment nécessaire de créer? Existe-t-elle une autre solution de définir l'id sans créer le fichier php? Car je travaille sur un projet déjà prévu et je n'ai pas à ajouter les fichiers, donc je ne souhaite pas de créer le fichier php...

**Toufik83** · 12/06/2019, 18h33

Tu n'as pas compris ce que j'ai dit.

Le fichier php que j'ai utilisé est juste un script qui génère du "json", dans ton cas tu ne l'utilises pas, tu vas plutôt utiliser le résultat json renvoyé par ton api.

Pour attribuer des id uniques pour chaque ligne de la <table #maTable>, le plugin DataTable nécessite une variable DT_RowId qui doit être présente dans le résultat json récupéré par ton api.

Tu peux montrer à quoi ressemble le résultat json que tu reçois depuis l'url de l'api ?

**Zalawy** · 12/06/2019, 19h59

Effectivement, j'ai mal compris et j'ai corrigé en suivant ton guide de code lequel tu as modifié et après avoir fait la modification, l'affichage des identifiants et login sont vide

Le message indique "No data available in table" et après avoir regardé la log, il n'y a pas de messages d'erreur. J'avoue que j'ai du mal à connaitre le problème pourquoi la liste des identifiants est vide

Tu peux montrer à quoi ressemble le résultat json que tu reçois depuis l'url de l'api ?

Comment que je distingue le résultat json depuis l'url de l'api? Je ne suis pas doué de faire le pont de communication entre Web et Web service

**Zalawy** · 12/06/2019, 20h11

Je mets le code modifié pour voir mieux :

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
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
 
$(document).ready(function () {
 
    function chargerHabilitation() {
 
        $.ajax({
            url: 'Api/ApiParamHabilitation.asmx/ChargerParamIdentifiants',
            type: 'POST',
            contentType: "application/json",
            dataType: 'json',
            success: function (response) {
                var jsonD = jQuery.parseJSON(response.d);
                var items = jsonD.DonneesSortie;
                var t = $('#maTable').DataTable();
                $.each(items, function (i, item) {
                    t.row.add([
                        '' + item.IdentifiantEU,
                        '' + item.IdentifiantBDRM,
                        '<button type=\"button\" class=\"data-popup-open btn btn-secondary\"  data-popup-open=\"popup-1\">Edit</button>',
                        '<button type=\"button\" class=\"data-popup-openD btn btn-delete\" style=\"background-color:blue;\" data-popup-open=\"popup-2\">Delete</button>',
                    ]).node().IdentifiantEU = item.DonneesSortieModif;
 
                    t.draw(); 
 
                });
                console.log('Statut Chargement:' + jsonD.Statut);
            },
            error: function (response) {
                var jsonD = response.d;
                console.log('Statut Chargement:' + jsonD.Statut);
            }
        });
 
    }
 
    function applyDatatable() {
        $('#maTable').DataTable({
            language: {
                processing: "Traitement en cours...",
                search: "Rechercher&nbsp;:",
                lengthMenu: "Afficher _MENU_ &eacute;l&eacute;ments",
                info: "Affichage de l'&eacute;lement _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
                infoEmpty: "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
                infoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                infoPostFix: "",
                loadingRecords: "Chargement en cours...",
                zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                emptyTable: "Aucune donnée disponible dans le tableau",
                paginate: {
                    first: "Premier",
                    previous: "Pr&eacute;c&eacute;dent",
                    next: "Suivant",
                    last: "Dernier"
                },
                aria: {
                    sortAscending: ": activer pour trier la colonne par ordre croissant",
                    sortDescending: ": activer pour trier la colonne par ordre décroissant"
                }
            }
        });
    }
 
    var idEvalActuelle = "";
    var table = $('#maTable').DataTable();
    $('#maTable ').on('click', 'btn', function () {
 
        var targeted_popup_class = $(this).attr('data-popup-open'), id_tr = $(this).closest('tr').attr('id'), data = table.row($(this).closest('tr')).data();
 
        idEvalActuelle = data[0];
        $('#popup_')
            .attr({ "data-popup": targeted_popup_class, "data-id-tr": id_tr })//attribution de data-popup et data-id-tr pour #popup_
            .find('#nomH2')
            .text(targeted_popup_class == "popup-1"?"Modifier un Identifiant" : "Supprimer un identifiant")//modification du titre selon l'action
            .next()
            .find("#Login").val("teste " + data[0])
            .parent()
            .next()
            .find('#MotDePasse').val(data[1])
            .closest('.popup-inner')
            .find('#ButtonAnnuler,.popup-close')
            .attr('data-popup-close', targeted_popup_class)//attribuer targeted_popup_class à 2 éléments, le <bouton> et le <a class="popup-close">
            .closest('#popup_')
            .fadeIn(350);
 
           console.log('data-popup :' + targeted_popup_class + ', id tr clicked :' + id_tr + ', button clicked :' + targeted_popup_class, ' data[0] :', data[0]);
 
    });
 
    function confirmerModification() {
 
        var donneesLg = $("#Login").val();
        var donneesPwd = $("#MotDePasse").val();
	var data_id_tr=$("#popup_").attr('data-id-tr');
	console.log('le id tr est :',data_id_tr);
        $.ajax({
            url: 'Api/ApiParamIdentifiant.asmx/ModifierUnLogin',
            type: 'POST',
            contentType: "application/json",
            dataType: 'json',
            data: JSON.stringify({
                donneesEntree: idEvalActuelle + "," + donneesLg + "," + donneesPwd + "," + data_id_tr,
            }),
            success: function (response) {
                var jsonD = response.d;
                messageModification = jsonD.DonneesSortieModif;
                console.log(messageModification);
            },
            error: function (response) {
                fail(response);
            }
        });
 
        function fail(reponse) {
            var jsonD = response.d;
            console.log("Statut Modification identifiant :" + jsonD.Statut);
 
        }
    }
 
    $('#Buttonvalider').click(function () {
        $('.popup-inner').hide();
        confirmerModification();
    });
 
    // Le curseur au niveau du menu
    var elt = $('#Identifiant');
    $('#Acceuil').removeClass("active");
    $('#Parametres').removeClass("active");
    $('#Deconnexion').removeClass("active");
});

**Toufik83** · 12/06/2019, 22h13

Après une recherche, j'ai vu qu'on a la possibilité d'utiliser la propriété "ajax" pour alimenter le DataTable en utilisant "dataSrc", et aussi la propriété "columnDefs" pour ajouter du html dans les lignes selon le "targets" de columnDefs (boutons dans ton cas).

Tu n'es plus obligé d'utiliser ta fonction chargerIdentifiants().

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
49
50
51
52
53
54
 
$(document).ready(function () {
	var idEvalActuelle = "";
        var table;
        applyDatatable();
        function applyDatatable() {
 
		table=$('#maTable').DataTable({
			processing: true,//important
			serverSide:true,//important
			language: {
				processing: "Traitement en cours...",
				search: "Rechercher :",
				lengthMenu: "Afficher les menus",
				info: "Affichage de l'element",
				infoEmpty: "Affichage de l'element sur des elements",
				infoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
				infoPostFix: "",
				loadingRecords: "Chargement en cours...",
				zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
				emptyTable: "Aucune donnée disponible dans le tableau",
				paginate: {
					first: "Premier",
					previous: "Pr&eacute;c&eacute;dent",
					next: "Suivant",
					last: "Dernier"
				},
				aria: {
					sortAscending: ": activer pour trier la colonne par ordre croissant",
					sortDescending: ": activer pour trier la colonne par ordre décroissant"
				}
			}
			,ajax:{
				url:'Api/ApiParamHabilitation.asmx/ChargerParamIdentifiants',
				dataSrc: "d.DonneesSortie"//on passe directement le d.DonneesSortie au data
			}
			,columns:[
				{data:"Login"},//1ére colonne c'est pour le Login
				{data:"MotDePasse"} //2éme colonne pour le mot de passe
			],
			columnDefs: [ {
				targets: 2, //3éme colonne (index 2).
				data: null, // set le data null pour cette colonne, puis utiliser defaultContent pour ajouter les boutons
				defaultContent: "<button class='data-popup-open btn btn-secondary' 
                                                                style='background-color:yellow;color:black' data-popup-open='popup-1'>Edit</button>"
					              +"<button class='data-popup-openD btn btn-secondary' 
                                                                 style='background-color:red;color:white' data-popup-open='popup-2'>Delete</button>"
			} ]
 
		});
 
	}//fin applyDatatable
 
});//fin document.ready

Edit : Ce que tu souhaites faire est déjà prêt à utiliser, il existe DataTable Editor qui permet de faire toutes les opérations possibles sur une table (Ajout,Edition,Suppression).

**Zalawy** · 13/06/2019, 12h20

Merci, j'ai testé avec ton code, l'affichage indique "traitement en cours" et après avoir inspecté les éléments, le message d'erreur indique "Cannot set property 'nTf' of undefined". Après avoir googlisé, le problème s'agit la balise th de footer que j'utilise principale pour afficher que le corps de tableau.

J'ai aperçu que je ne t'ai pas montré une partie de script de fichier DataTableControl pour afficher le tableau et pour la balise th de footer , faut-il le enlever?

Code html :

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
<div class="call-to-action-container">
    <div class="container">
        <div class="row">
            <table id="maTable" class="display">
                <thead>
                    <tr>
                        <th>Identifiant</th>
                        <th>Mot de passe</th>
                        <th>Modifier</th>
                        <th>Supprimer</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                    <tr>
                        <th>Identifiant</th>
                        <th>Mot de passe</th>
                        <th>Modifier</th>
                        <th>Supprimer</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>

**Zalawy** · 13/06/2019, 16h46

J'ai corrigé et modifié le code, j'ai bien affiché la liste des éléments mais j'ai rencontré le problème sur l'action au moment de cliquer "Edit" /"Delete", quand je clique le bouton de modifier/supprimer et le popup n'apparaît pas. Pourtant, j'ai prévu de faire le script .click

Voici le script :

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
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
 
$(document).ready(function () {
    applyDatatable();
 
        $.ajax({
            url: 'Api/ApiParamHabilitation.asmx/ChargerParamIdentifiants',
            type: 'POST',
            contentType: "application/json",
            dataType: 'json',
            success: function (response) {
                var jsonD = jQuery.parseJSON(response.d);
                var items = jsonD.DonneesSortie;
                var t = $('#maTable').DataTable();
                $.each(items, function (i, item) {
                    t.row.add([
                        '' + item.IdentifiantEU,
                        '' + item.IdentifiantBDRM,
                        '<button type=\"button\" class=\"data-popup-open btn btn-secondary\"  data-popup-open=\"popup-1\">Edit</button>',
                        '<button type=\"button\" class=\"data-popup-openD btn btn-delete\" style=\"background-color:blue;\" data-popup-open=\"popup-2\">Delete</button>',
                    ]).node().IdentifiantEU = item.DonneesSortieModif;
 
                    t.draw();
 
                });
                console.log('Statut Chargement:' + jsonD.Statut);
            },
            error: function (response) {
                var jsonD = jQuery.parseJSON(response.d);
                console.log('Statut Chargement:' + jsonD.Statut);
            }
        });
 
    //}
 
    function applyDatatable() {
        $('#maTable').DataTable({
            language: {
                processing: "Traitement en cours...",
                search: "Rechercher&nbsp;:",
                lengthMenu: "Afficher _MENU_ &eacute;l&eacute;ments",
                info: "Affichage de l'&eacute;lement _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
                infoEmpty: "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
                infoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                infoPostFix: "",
                loadingRecords: "Chargement en cours...",
                zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                emptyTable: "Aucune donnée disponible dans le tableau",
                paginate: {
                    first: "Premier",
                    previous: "Pr&eacute;c&eacute;dent",
                    next: "Suivant",
                    last: "Dernier"
                },
                aria: {
                    sortAscending: ": activer pour trier la colonne par ordre croissant",
                    sortDescending: ": activer pour trier la colonne par ordre décroissant"
                }
            }
        });
    }
    var idEvalActuelle = "";
    var table = $('#maTable').DataTable();
    $('#maTable ').on('click', 'data-popup-open btn', function () {
 
        var targeted_popup_class = $(this).attr('data-popup-open'), id_tr = $(this).closest('tr').attr('id');
        var data = table.row($(this).closest('tr')).data();
 
        idEvalActuelle = data[0];
        $('#popup_')
            .attr({ "data-popup": targeted_popup_class, "data-id-tr": id_tr })
            .find('#nomH2')
            .text(targeted_popup_class == "popup-1"?"Modifier un Identifiant" : "Supprimer un identifiant")//modification du titre selon l'action
            .next()
            .find("#Login").val("teste " + data[0])
            .parent()
            .next()
            .find('#MotDePasse').val(data[1])
            .closest('.popup-inner')
            .find('#ButtonAnnuler,.popup-close')
            .attr('data-popup-close', targeted_popup_class)//attribuer targeted_popup_class à 2 éléments, le <bouton> et le <a class="popup-close">
            .closest('#popup_')
            .fadeIn(350);
 
           console.log('data-popup :' + targeted_popup_class + ', id tr clicked :' + id_tr + ', button clicked :' + targeted_popup_class, ' data[0] :', data[0]);
 
    });
 
    function confirmerModification() {
 
        var donneesLg = $("#Login").val();
        var donneesPwd = $("#MotDePasse").val();
	var data_id_tr=$("#popup_").attr('data-id-tr');
	console.log('le id tr est :',data_id_tr);
        $.ajax({
            url: 'Api/ApiParamIdentifiant.asmx/ModifierUnLogin',
            type: 'POST',
            contentType: "application/json",
            dataType: 'json',
            data: JSON.stringify({
                donneesEntree: idEvalActuelle + "," + donneesLg + "," + donneesPwd + "," + data_id_tr,
            }),
            success: function (response) {
                var jsonD = response.d;
                messageModification = jsonD.DonneesSortieModif;
                console.log(messageModification);
            },
            error: function (response) {
                fail(response);
            }
        });
 
        function fail(reponse) {
            var jsonD = response.d;
            console.log("Statut Modification identifiant :" + jsonD.Statut);
 
        }
    }
 
    //fonction de suppression
    function confirmerSuppression() {
        var donneesEu = $("#IdentifiantEU").val();
        var donneesBdrm = $("#IdentifiantBDRM").val();
        $.ajax({
            url: 'Api/ApiParamHabilitation.asmx/SupprimerUnLogin',
            type: 'POST',
            contentType: "application/json",
            dataType: 'json',
            data: JSON.stringify({
                donneesEntree: idEvalActuelle + "," + donneesBdrm + "," + donneesEu,
            }),
            success: function (response) {
                var jsonD = jQuery.parseJSON(response.d);
                messageSuppression = jsonD.donneesEntree;
                alert(messageSuppression);
                location.reload(true);
            },
            error: function (response) {
 
                fail(response);
            }
        });
 
        function fail(reponse) {
            var jsonD = jQuery.parseJSON(response.d);
            console.log("Statut Suppression habilitation:" + jsonD.Statut);
 
        }
    }
 
    $('#Buttonvalider').click(function () {
        $('.popup-inner').hide();
        confirmerModification();
    });
 
    // Le curseur au niveau du menu
    var elt = $('#Identifiant');
    $('#Acceuil').removeClass("active");
    $('#Parametres').removeClass("active");
    $('#Deconnexion').removeClass("active");
});

Pourquoi l'action de popup n'affiche pas au moment de cliquer un des boutons ? Peut-être, j'ai loupé un bout de code ou le code incorrect

**Toufik83** · 13/06/2019, 18h29

Regarde ce que tu as fais ici :

Code :

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

1
2
 
$('#maTable ').on('click', 'data-popup-open btn',function(){...});

Supprime le data-popup-open et ajoute un point avant btn :

Code :

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

1
2
 
$('#maTable ').on('click', '.btn',function(){...});

Vérifies aussi que la console.log t'affiche correctement les valeurs de data,targeted_popup_class et id_tr_clicked :

Code :

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

1
2
3
 
console.log('data-popup :' + targeted_popup_class + ', id tr clicked :' + id_tr + ', button clicked :' + targeted_popup_class, ' data[0] :', data[0]);
// si data[0] est "indefined", essaies data.IdentifiantEU.

Pour les <th> du footer, j'avais la même erreur aussi, j'ai supprimé le <footer> au complet pour que ça fonctionne.

Et je répète qu'il existe DataTable Editor qui permet de faire toutes les opérations possibles sur une table (Ajout,Edition,Suppression).

Cette API est en ligne ? si oui, tu peux me donner son lien complet pour que je teste avec ?

**Zalawy** · 15/06/2019, 23h06

Bonsoir,

Je te remercie pour la réponse rapide, j'ai bien avancé mais j'ai rencontré le problème au niveau de l'API. Je sais que le code a l'air ne pas être propre mais il fonctionne à part d'au moment cliquer le bouton de suppression. Voici le code :

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
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
 
vfunction applyDatatable() {
    chargerHabilitation();
 
    function chargerHabilitation() {
 
        $.ajax({
            url: 'Api/ApiParamHabilitation.asmx/ChargerParamIdentifiants',
            type: 'POST',
            contentType: "application/json",
            dataType: 'json',
            success: function (response) {
                var jsonD = jQuery.parseJSON(response.d);
                var items = jsonD.DonneesSortie;
                var t = $('#maTable').DataTable();
                $.each(items, function (i, item) {
                    t.row.add([
                        '' + item.IdentifiantEU,
                        '' + item.IdentifiantBDRM,
                        '<button class=\"data-popup-open btn btn-secondary\"  data-popup-open=\"popup-1\">Edit</button>',
                        '<button class=\"data-popup-openD btn btn-Delete\" style=\"background-color:blue;\" data-popup-open=\"popup-2\">Delete</button>',
                    ]).draw();
 
                });
                console.log('Statut Chargement:' + jsonD.Statut);
            },
            error: function (response) {
                var jsonD = jQuery.parseJSON(response.d);
                console.log('Statut Chargement:' + jsonD.Statut);
            }
        });
 
    }
 
    var idEvalActuelle = "";
   var T = $('#maTable').DataTable({
        language: {
            processing: "Traitement en cours...",
            search: "Rechercher&nbsp;:",
            lengthMenu: "Afficher _MENU_ &eacute;l&eacute;ments",
            info: "Affichage de l'&eacute;lement _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
            infoEmpty: "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
            infoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
            infoPostFix: "",
            loadingRecords: "Chargement en cours...",
            zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
            emptyTable: "Aucune donnée disponible dans le tableau",
            paginate: {
                first: "Premier",
                previous: "Pr&eacute;c&eacute;dent",
                next: "Suivant",
                last: "Dernier"
            },
            aria: {
                sortAscending: ": activer pour trier la colonne par ordre croissant",
                sortDescending: ": activer pour trier la colonne par ordre décroissant"
            }
        },
        "columnDefs": [{
            "targets": -1,
            "data": null,
            "defaultContent": "<button class=\"data-popup-openD btn btn-Delete\" style=\"background-color:blue;\" data-popup-open=\"popup-2\">Delete</button>"
        }]
    });
 
 
   $('#maTable tbody').on('click', 'button', function () {
 
       var classNom = this.className;
       var data = T.row($(this).parents('tr')).data(); // data = les valeurs des elements de la ligne
 
       if (classNom === 'data-popup-open btn btn-secondary') { // action pour l'edition. mis en commentaire en haut
                $('#IdentifiantEU').val("" + data[0]);
                $('#IdentifiantBDRM').val("" + data[1]);
                idEvalActuelle = data[0];
 
                var that = $('[data-popup-open]');
                var targeted_popup_class = jQuery(that).attr('data-popup-open');
                $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
       }
       if (classNom === 'data-popup-openD btn btn-Delete') { // action a mettre en place pour la suppression
 
           $.ajax({
            url: 'Api/ApiParamHabilitation.asmx/SupprimerUnLogin',
            type: 'POST',
            contentType: "application/json",
            dataType: 'json',
            data: JSON.stringify({ id: data[0] }),
               error: function () {
                   alert('Erreur');
               },
               success: function (data) {
                   alert("Suppression succès");
               }
           });
       }
   });
 
   $('[data-popup-close]').on('click', function (e) {
       var targeted_popup_class = jQuery(this).attr('data-popup-close');
       $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
 
       e.preventDefault();
   });
 
   function confirmerModification() {        
		var donneesLg = $("#Login").val();
        var donneesPwd = $("#MotDePasse").val();
       $.ajax({
            url: 'Api/ApiParamIdentifiant.asmx/ModifierUnLogin',
            type: 'POST',
            contentType: "application/json",
            dataType: 'json',
            data: JSON.stringify({
                donneesEntree: idEvalActuelle + "," + donneesLg + "," + donneesPwd + "," + data_id_tr,
           }),
           success: function (response) {
               var jsonD = jQuery.parseJSON(response.d);
               messageModification = jsonD.DonneesSortieModif;
               alert(messageModification);
               location.reload(true);
           },
           error: function (response) {
 
               fail(response);
           }
       });
 
       function fail(response) {
           var jsonD = jQuery.parseJSON(response.d);
           console.log("Statut Modification habilitation:" + jsonD.Statut);
 
       }
   }
 
   $('#Buttonvalider').click(function () {
       $('.popup-inner').hide();
       confirmerModification();
 
   });
 
    // Le curseur au niveau du menu
    var elt = $('#Identifiant');
    $('#Acceuil').removeClass("active");
    $('#Parametres').removeClass("active");
    $('#Deconnexion').removeClass("active");
}
 
$(document).ready(applyDatatable(), function () {
 
});

Pour les <th> du footer, j'avais la même erreur aussi, j'ai supprimé le <footer> au complet pour que ça fonctionne.

Je l'ai testé sans footer et ça n'a pas marché malheureusement

Et je répète qu'il existe DataTable Editor qui permet de faire toutes les opérations possibles sur une table (Ajout,Edition,Suppression).

J'ai lu et j'ai extrait un bout mais l'action du bouton fonctionne et pas au moment de faire l'appel à la suppression par l'API.

L'api n'est pas en ligne comme j'ai rencontré le problème à ce niveau et voici le message d'erreur :

Code :

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

jquery-1.11.1.min.js:4 POST http://localhost/EspaceLogin/Web/Api/ApiParamLogin.asmx/SupprimerUnLogin 500 (Internal Server Error)

Comme si la méthode SupprimerUnLogin n'est pas connu alors que cette méthode est déjà prévu

**Toufik83** · 15/06/2019, 23h52

Salut,

pour t'informer, j'ai fais ton exemple avec 3 méthodes, la première avec un fichier json (sans les paramètres processing et serverSide), la deuxième avec un fichier php (avec les paramètres processing et serverSide) qui génère du json et la 3éme avec DataTable Editor, et les 3 codes sont bons, tout fonctionne comme il le faut.

Est-ce que tu as essayé de supprimer les paramètres "processing" et "serverSide" de mon post 13 ? parce qu'on ne doit pas mettre ces deux paramètres lorsqu'on utilise seulement un fichier json comme source de donnée.

Concernant l'erreur que tu reçois, L’erreur server 500 se produit probablement car une erreur s’est produite lors de la configuration du serveur Web. Regarde ce lien

Ce que t'es entrain de faire là s'appelle du bricolage, parce que tu n'utilises pas les méthodes du plugin DataTable selon la documentation...

**Zalawy** · 17/06/2019, 17h57

Bonjour,

J'ai réussi à résoudre le problème, j'ai pu supprimer une ligne via l'API. Concernant le message d'erreur :

"Concernant l'erreur que tu reçois, L’erreur server 500 se produit probablement car une erreur s’est produite lors de la configuration du serveur Web."

J'ai aperçu que le web service ne connaît pas la méthode de suppression, je l'ai corrigé et c'est bon. Je suis contente de l'avoir réussi et je te remercie d'avoir pris le temps de répondre à ma demande

Synchroniser la suppression d'un identifiant [AJAX]

jQuery

Discussions similaires

Partager

Partager