IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
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

jQuery Discussion :

Set les attributs d'un <table>


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre émérite
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Novembre 2015
    Messages
    644
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Novembre 2015
    Messages : 644
    Par défaut Set les attributs d'un <table>
    Bonjour à tous,

    Avec ce titre peu explicite, voici mon problème :

    Dans mon HTML, j'ai un tableau (avec le plugin Footable) sous les balises table que je déclare de la sorte :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <table id="editing-example" class="table" data-sort="true" data-editing-show-text='<span class="fooicon fooicon-pencil" aria-hidden="true"></span> Edit rows' data-editing="true" data-editing-always-show="true" data-editing-add-test="Ajouter un nouvel interlocuteur" data-filtering="true" data-editing-edit-text='<span class="fooicon fooicon-pencil" aria-hidden="true"></span>' data-paging="true" ></table>
    Avec tout un tas d'options... pour qu'il puisse répondre à mes besoins.

    Ce tableau à pour but de charger des informations sur les salariés d'une entreprise.

    La manip est la suivante :
    On fait une recherche d'une entreprise, on clique ensuite sur l'onglet salarié et on arrive sur ce tableau.
    On peut faire une nouvelle recherche, etc...

    Mon problème :
    Ma première recherche marche à merveille, mon tableau est comme je le souhaite.
    Mais lorsque je veux faire une autre recherche, au moment d'aller sur ce fameux onglet "salarié", le tableau est dupliqué. J'entends par là, que les options tel que data-sorting="true", etc... sont dupiquées. J'ai donc deux barres de recherches, deux fois la pagination...
    Pour la 2ème recherche. Pour la 3ème, j'aurais 3 barres de recherche, 3 fois la pagination d'indiquée...

    Je pense que vous commencez à tilter le problème, c'est que mon tableau se réaffiche bien, mais les options, au lieu de soit, s'écraser les unes des autres pour s'afficher qu'une seule fois, S'AJOUTENT...

    J'ai donc essayé ça :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <table id="editing-example" class="table"></table>
    Avec

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    $( document ).ready(function() {
        $( "table#editing-example" ).attr({
    	  "data-sort": "true",
    	  "data-editing-show-text": '<span class="fooicon fooicon-pencil" aria-hidden="true"></span> Edit rows',
    	  "data-editing": "true",
    	  "data-editing-always-show": "true",
    	  "data-editing-add-test": "Ajouter un nouvel interlocuteur",
    	  "data-filtering": "true",
    	  "data-editing-edit-text": '<span class="fooicon fooicon-pencil" aria-hidden="true"></span>',
    	  "data-paging": "true"
    	});
    });
    Je me suis dis que si je charge les options de mon tableau une fois que mon document est chargé, c'est bon ! Et... Non

    Mais rien à y faire, toujours le même problème.

    Si quelqu'un à éventuellement une idée...

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    avec jquery =>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $( "#editing-example" ).data()
    https://jsfiddle.net/kc9qLa1k/
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre émérite
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Novembre 2015
    Messages
    644
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Novembre 2015
    Messages : 644
    Par défaut
    Salut EtrangeGrenouille

    Merci de ton intérêt porté à mon post.

    Juste pour moi le temps d'avoir testé ce que tu m'as dis en :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $( document ).ready(function() {
    	$("#editing-example").data('data-sort', 'true');
    	$("#editing-example").data('data-editing-show-text', '<span class="fooicon fooicon-pencil" aria-hidden="true"></span> Edit rows');
    	$("#editing-example").data('data-editing', 'true');
    	$("#editing-example").data('data-editing-always-show', 'true');
    	$("#editing-example").data('data-editing-add-test', 'Ajouter un nouvel interlocuteur');
    	$("#editing-example").data('data-filtering', 'true');
    	$("#editing-example").data('data-editing-edit-test', '<span class="fooicon fooicon-pencil" aria-hidden="true"></span>');
    	$("#editing-example").data('data-paging', 'true');
    });
    (J'ai pas trop fais attention de savoir si on pouvait tout faire en une ligne...)

    But it's not working. Je n'ai plus rien, plus de pagination, filtre, ordre... :/

    EDIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIT (avant que tu me cries dessus ) : J'avais pas vu ton edit avec ton Jsfiddle. J'ai repris le même fonctionnement, but it's not working. :/

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    Tu as chargé Jquery ?
    Qu'est ce supposé faire ?.??
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Membre émérite
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Novembre 2015
    Messages
    644
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Novembre 2015
    Messages : 644
    Par défaut
    Bien sur que j'ai chargé Jquery. ^^

    Ce sont tous les attributs liés à mon tableau, qui permettent d'initialiser les différentes options :
    - Une barre de recherche
    - Editer ligne par ligne
    - La pagination

    Notamment ces 3 là. Le tri par colonne est géré par mes headers de colonne.

    Avec attr, ces fonctions étaient correctement implémentées mais comme dit dans mon premier post, elles étaient à chaque fois dupliquée quand je faisais un nouveau clic sur l'onglet du menu correspondant. Avec le .data(), elles ne le sont plus...

  6. #6
    Membre émérite
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Novembre 2015
    Messages
    644
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Novembre 2015
    Messages : 644
    Par défaut
    Je te mets ici une capture d'écran.

    Tu vois bien deux menus, avec le premier, l'onglet Rechercher qui permet... de faire une recherche. (pour de vrai!)

    Une fois que tu valides ta recherche, tu as le deuxième sous-menu qui apparaît. Et lorsque que je clique sur interlocuteur, mon tableau rentre en jeu.

    https://gyazo.com/153e1ca8f3984bb273cc4ad7321f0066


    EDIT 2:
    En ce qui concerne la configuration du tableau :

    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
    $('a#interlocuteurs_id').on('click', function() {
     
    	var $modal = $('#editor-modal'),
    	$editor = $('#editor'),
    	$editorTitle = $('#editor-title'),
    	ft = FooTable.init('#editing-example', {
    		ajaxEnabled: true,
    		"sorting": { "enabled": true },
    		columns: $.get('interlocuteur_table/columns.json'),
    		//rows: $.get('test.json'),
    		rows: $.ajax({
    			url :'interlocuteur_table/server_side_interlocuteur.php', 
    			dataType: 'json'/*,
    			success: function(data) {
    				$('#editing-example').trigger('footable_redraw');
    			}*/
    		}),
     
    		editing: {
    			"addText": "Ajouter un nouvel interlocuteur",
    			enabled: true,
    			addRow: function(){
    				$modal.removeData('row');
    				$editor[0].reset();
    				$editorTitle.text('Ajouter un nouvel interlocuteur');
    				$modal.modal('show');
    			},
    			editRow: function(row){
    				var values = row.val();
    				$editor.find('#nom').val(values.I_NOM);
    				$editor.find('#prenom').val(values.I_PRENOM);
    				$editor.find('#telephone').val(values.I_TEL1);
    				$editor.find('#portable').val(values.I_TEL3);
    				$editor.find('#email').val(values.I_EMAIL);
    				$editor.find('#fonction').val(values.I_ADRESSE4);
    				$editor.find('#code').val(values.I_CODE);
    				$modal.data('row', row);
    				$editorTitle.text('Modifier ' + values.I_PRENOM + ' ' + values.I_NOM);
    				$modal.modal('show');
    				},
    			deleteRow: function(row){
    				var values = row.val();
    				$.ajax({
    					url: 'interlocuteur_table/delete_in_bdd.php',
    					dataType: 'json',
    					data: { code: values['I_CODE'] },
    					success: function(data) {
    						if (data.statut == 'OK') {
    							if (confirm('Voulez-vous vraiment supprimer cet interlocuteur?')){
    								row.delete();
    								$("#delete_interlocuteur").html(data.message).show();
    							}
    						} else
    							$("#delete_interlocuteur_fail").html(data.message).show();
    					}
    				});
    				// mettre I_EMAIL dans I_COMMENTAIRE
     
    			}
    		}
    	}),
    	uid = 10;
     
    	$editor.on('submit', function(e){
    		if (this.checkValidity && !this.checkValidity()) 
    			return;
    		e.preventDefault();
     
    		var row = $modal.data('row'),
    			values = {
    				I_TITRE: $editor.find('#interlocuteur_titre_id').val(),
    				I_NOM: $editor.find('#nom').val(),
    				I_PRENOM: $editor.find('#prenom').val(),
    				I_TEL1: $editor.find('#telephone').val(),
    				I_TEL3: $editor.find('#portable').val(),
    				I_EMAIL: $editor.find('#email').val(),
    				I_ADRESSE4: $editor.find('#fonction').val(),
    				I_CODE: $editor.find('#code').val()
    			};
     
    		if (row instanceof FooTable.Row){
    		// edit
    			$.ajax({
    				url: 'interlocuteur_table/update_in_bdd.php',
    				dataType: 'json',
    				data: { nom: values['I_NOM'], prenom: values['I_PRENOM'], telephone: values['I_TEL1'], portable: values['I_TEL3'], email: values['I_EMAIL'], fonction: values['I_ADRESSE4'], code: values['I_CODE']},
    				success: function(data) {
    					if (data.statut == 'OK'){
    						$("#edit_interlocuteur").html(data.message).show();
    					}else 
    						$("#edit_interlocuteur_fail").html(data.message).show();
    				}
    			});
    			row.val(values);
     
    		} else {
    			// add
    			$.ajax({
    				url: 'interlocuteur_table/insert_in_bdd.php',
    				dataType: 'json',
    				data: { titre: values['I_TITRE'], nom: values['I_NOM'], prenom: values['I_PRENOM'], telephone: values['I_TEL1'], portable: values['I_TEL3'], email: values['I_EMAIL'], fonction: values['I_ADRESSE4'] },
    				success : function(data) {
    					if (data.statut == 'OK')
    						$("#ajout_interlocuteur").html(data.message).show();
    					else
    						$("ajout_interlocuteur_fail").html(data.message).show();
    				}
    			});
    			ft.rows.add(values);
    		}
    		$modal.modal('hide');
    	});
     
    });
    EDIT 3:

    Le plugin est chargé après les attributs, puisque ces derniers sont chargés dans le document.

    EDIT 4:

    Après avoir regardé le HTML généré avec le .data(), les attributs n'y sont pas :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <table style="display: table;" id="editing-example" class="table footable footable-1 footable-editing footable-editing-right breakpoint-lg"></table>

  7. #7
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    relance le plugin sur le tableau après avoir modifié les attributs
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 3
    Dernier message: 03/07/2013, 14h12
  2. Contrainte sur les attributs des tables référencées
    Par prgasp77 dans le forum Langage SQL
    Réponses: 5
    Dernier message: 02/12/2010, 18h00
  3. [WD14] Modifier les attributs du titre d'une colonne de table
    Par mogwai162 dans le forum WinDev
    Réponses: 2
    Dernier message: 12/03/2010, 10h12
  4. Comment lire les attributs "hide" d'une table en VBA
    Par fredlefou dans le forum Access
    Réponses: 1
    Dernier message: 28/01/2008, 01h30

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