Discussion :

[guigui69]

Bonjour,

me permet de venir vers vous pour une aide sur l'utilisation de bootstrap pour un table.

J'ai une page web avec une liste déroulante avec un bouton recherche (avec javascript+ ajax pour afficher le résultat), cela fonctionne mais je bloque sur un élément.

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
 $.ajax({
   type: "POST",
   url: "./ajax/resultat_rechercher.php",
   data: "marca="+$("#marca").val()+"&modelo="+$("#modelo").val()+"&substatus="+$("#substatus").val(),
   cache: false,
	dataType:"json",
   success: function(data){ $('#resultat_rechercher').bootstrapTable({
              data: data
           });
		     $(function () {    $('a').popover()  })
       },
       error: function(e) {
           console.log(e.responseText);
       }
    });

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
			<table id="resultat_rechercher"
 
class="table" data-search="true" data-show-columns="true" data-show-export="true" data-show-fullscreen="true">
 
<thead class="thead-dark">
                        <tr>
                            <th data-sortable="true" data-field="Point de Vente">Point de</br> Vente</th>
                            <th data-sortable="true" data-field="Localisation"> Localisation</th>
                            <th data-sortable="true" data-field="No Cde Usine">No Cde</br> Usine</th>
							<th data-sortable="true" data-field="Vin">Vin</th>
                            <th data-sortable="true" data-field="Sous-status">Sous</br>status</th>
							<th data-field="Dept Livraison">Dept</br>Livraison</th>
                            <th data-sortable="true" data-field="Marque Véhicule">Marque</th>
                            <th data-sortable="true" data-field="Modèle">Modèle</th>
							<th data-sortable="true" data-field="Version">Version</th>
                            <th data-sortable="true" data-field="Couleur">Couleur</th>
							<th data-sortable="true" data-field="Intérieur">Intérieur</th>
							<th data-sortable="true" data-field="option">Options</th>
                        </tr>
                   </thead>
                    <tbody>
 
					</tbody></table>

voici la partie javascript et html.

J'aurai voulu ajouter un bouton onclick (avec une fonction javascript) pour les données qui vont etre dans cette colonne <th data-field="Dept Livraison">Dept</br>Livraison</th>

Je voudrais savoir si c'est possible, si quelqu'un pourrais m'aiguiller

Merci d'avance pour votre aide

guigui69

[Toufik83]

Salut,

Pour attacher un événement "click" aux <th data-field="Dept Livraison"> c'est simple :

Code :

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

1
2
3
4
5
6
7
8
9
 
$(document).ready(function(){
    //D'ailleurs tout le code jquery doit être mis ici
 
    $("th[data-field='Dept Livraison']").click(function(){
         //ton code ici...
         console.log("HTML :",$(this).html());
    });
});

[guigui69]

D'accord,

Mais comment je doit faire car les information pour le onclick se trouve dans le résultat de ma requête SQL/ajax qui correspond dans mon code javscript à ceci:

Code :

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

 data: data

(en json)

[Toufik83]

Je ne suis pas sûr d'avoir compris ce que tu cherches à faire exactement, tu veux ajouter un bouton dans l'entête <th data-field='Dept Livraison'></th> pour faire quoi ensuite ? récupérer les données de la colonne ?