Ajouter un élément dans l'entête d'une TABLE

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:

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:

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

Salut,

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

Code:

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());
    });
});

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:

data: data

(en json)

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 ?