[DataTable] Cumul de clic sur bouton

**kodo** · 26/12/2018, 23h50

Bonjour,
Je cherche à développer une fonctionnalité qui consiste à ajouter une ligne à une table datatable avec jquery.

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
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
<html>
   <head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="http://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
		<link href="http://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
 
		<script type = "text/javascript">
 
		$(document).ready(function() {
			var dataSet = [
			  ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
			  ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"],
			  ["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000"],
			  ["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060"],
			  ["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700"],
			  ["Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000"],
			  ["Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500"],
			  ["Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900"]
			];
			$('#example').DataTable({
			  data: dataSet,
			  responsive: true,
			  columns: [{
				  title: "Name"
				},
				{
				  title: "Position"
				},
				{
				  title: "Office"
				},
				{
				  title: "Extn."
				},
				{
				  title: "Start date"
				},
				{
				  title: "Salary"
				},
				{
				  "render": function (o) {
	        	   return '<button class="btn">Détails</button>'; 
					}
				}
			  ],
				fnDrawCallback : function() {
					$('#example tbody tr').on('click', '.btn', function () {
						var row = $(this).closest('tr');
						var data = $('#example').dataTable().fnGetData(row);
						alert(data[0]);
					});
				}
			});
 
 
		});
 
		function addLine(){
			var t = $('#example').DataTable();
			t.row.add(["AAAAAA", "BBBBBBB", "CCCCCC", "5000", "2018/10/14", "$900"]).draw();
 
		}
		</script>
	</head>
	<body>
		<table id="example" width="100%"></table>
		<button type="button" onclick="addLine()">Add</button>
 
	</body>
</html>

Apres chargement de la page, je clique sur le bouton "Détails" d'une ligne de ma table, il m'affiche le texte de la première colonne.
lorsque j'ajoute une ligne en cliquant sur le bouton Add, une ligne s'ajoute. Je clique sur le bouton "Détails" correspondant, il m'affiche bien un message alert avec avec le texte de la première colonne (AAAAAA).
lorsque j'ajoute une deuxième ligne, une ligne s'ajoute, mais lorsque je clique sur le bouton "Détails" correspondant, il m'affiche deux fois un message alert.
une troisième ligne ajouté permet d'afficher 3 alert, ainsi de suite.

Avez vous une idée sur la source de ce comportement bizarre ? Je suis un débutant avec Jquery Datatable.

Merci de votre aide.

**NoSmoking** · 24/01/2019, 11h59

Bonjour,
il faut savoir que la fonction fnDrawCallback, définie dans ton code, est appelée à chaque fois que DataTables effectue un nouvel affichage.
De ceci en découle que le code compris dans celle-ci se répète à chaque ajout d'une ligne et donc augmente le nombre de fois où tu affectes l'événement.

Il te faut sortir ce code de l’initialisation de ta DataTables.

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
  $('#example').DataTable({
    data: dataSet,
    responsive: true,
    columns: [{
        // tes données
     ],
    fnDrawCallback : function() {
      console.log("function %s : Fonction appelée à chaque fois que DataTables effectue un nouvel affichage.", arguments.callee.name);
/*
      $('#example tbody tr').on('click', '.btn', function () {
        var row = $(this).closest('tr');
        var data = $('#example').dataTable().fnGetData(row);
        alert(data[0]);
      });
*/
    }
  });

et la mettre juste après

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function() {
  $('#example').DataTable({
    // ton code
  });
  // fonction a définir en dehors de la fonction « fnDrawCallback »
  $('#example').on('click', '.btn', function () {
    var row = $(this).closest('tr');
    var data = $('#example').dataTable().fnGetData(row);
    alert(data[0]);
  })
});

[DataTable] Cumul de clic sur bouton

jQuery

Vue hybride

Discussions similaires

Partager

Partager