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.