Discussion :

[grinder59]

Bonjour,

Je suis en train de développer un plugin me permettant de gérer des tableaux et je souhaiterai pouvoir appeler, depuis l'extérieur du plugin, un méthode permettant de recharger les données.

En gros, dans le code principal, j'aimerai faire ça :

Code javascript :

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

1
2
3
4
5
6
7
8
 
    var myTab = $('#monDiv').tabData({
      'param1' : 'bidule',
    });
 
    $('.btn').click(function(){
        myTab.reloadTableau();
   })

la classe .btn est indépendant du plugin mais fait appel à la méthode reloadData que je dois définir à l'intérieur du plugin tabData afin de manipuler les données du tableau (en l'occurrence de le recharger).

Voici mon plugin simplifié (avec la tentative de déclaration de la méthode accessible par l'extérieur) :

Code javascript :

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
 
(function ( $ ) {
 
 
    // corps du tableau
    function constructionTBody(options){
        var tabBody = $(options.cible).find('tbody');
 
        $.ajax({
	// url récupération des données
        })
        .done(function(retour) {
	    $.each(retour, function(k, item){
 
		// construction des lignes avec les résultats de la requête ajax
		    $(tabBody).append('<tr><td>'+retour.item.val1+'</td><td>'+retour.item.val2+'</td><td>'+retour.item.val3+'</td></tr>');
		})
        })
    }
 
    $.fn.tabData = function(parametres){
        return this.each(function(){
            // paramètres par défaut
            var defaults = {
		// options
            };
 
            // fusion des paramètres par défaut avec ceux du code appelant
            var opts = $.extend( {}, defaults, parametres );
 
 
            // en tête du tableau
            $(opts.cible).append('<thead></thead><tbody></tbody>');
            var tabHead = $(opts.cible).find('thead');
            var ligne = '<tr><th>#</th>';
            $.each(opts.colonnes, function(k, c){
                ligne += '<th class="headcol" data-el-col="'+k+'">'+c.libelle+'</th>';
            })
            ligne += '<th></th></tr>';
            tabHead.append(ligne);
 
            // affichage du body du tableau
            constructionTBody(opts);
 
            // j'ai, entre autres, tenté un truc dans ce goût là...
            // reloadTableau = function(){
            //    constructionTBody(opts);
            // }
 
        })
    };
}( jQuery ));

j'ai cherché un peu partout, mais je n'ai rien trouvé de concluant et tous les essais que j'ai fait ont échoué.

Auriez-vous une piste ?
Merci !

[Toufik83]

1- pourquoi retour.item ?, item est à l'intérieur de la boucle each, donc il est une référence des items de l'objet retour.
Normalement c'est item.val1, item.val2, item.val3

Code :

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

1
2
3
4
5
6
7
8
 
//....
.done(function(retour) {
    $.each(retour, function(k, item){
      // construction des lignes avec les résultats de la requête ajax
      $(tabBody).append('<tr><td>'+item.val1+'</td><td>'+item.val2+'</td><td>'+item.val3+'</td></tr>');
   });
});

2- Tu as oublié d'ajouter l'item "cible" dans la variable opts.

Code :

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

1
2
3
 var opts = $.extend( {
		cible:$(this)
	}, defaults, parametres );

3- Ajoutes ce code juste après la déclaration de la variable opts, pour que ça devient comme ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
var opts = $.extend( {
	cible:$(this)
}, defaults, parametres );
 
$.fn.reloadTableau=function(){
	$(this).find('tbody').html('');
	console.log('tableau vidé');
	console.log("Rechargement...");
	constructionTBody(opts);
}
//... la suite