JQuery et dataTable

**pigpen** · 18/07/2012, 11h22

Bonjour à tous,

En grand débutant en JQuery que je suis, il y a des comportements que je ne comprend pas du tout.

Voilà l'idée derrière ce bout de code :

Faire un beau tableau (avec le plugin dataTable de JQuery).
On pourra ajouter et supprimer des lignes de ce tableau avec deux images (+ et -)

Cela fonctionne sans le plugin dataTable, mais pas avec. cf le code

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title></title>
  <meta name="Generator" content="Cocoa HTML Writer">
  <meta name="CocoaVersion" content="1138.47">
 
<SCRIPT type="text/javascript" src="jquery.js"></SCRIPT>
<SCRIPT type="text/javascript" src="js/jquery.dataTables.js"></SCRIPT>
 
 
 
</head>
<body>
 
<table id="monTab">
<thead>
	<tr>
 
		<th>test</th>	
		<th>test</th>
 
		<th>
			<a href="#" id="addButtonAction">
				<img src="img/add.gif" alt="ca marche pas" />
			</a>
		</th>
	</tr>
</thead>
 
<tbody>
 
</tbody>
 
</table>
 
<a href="#" id="submitButton">Envoyer</a>
 
 
<script type="text/javascript">
 
 
 
$(document).ready(function() 
{
        //fonctionne sans ceci : 
	//$('#monTab').dataTable();
 
    $("a#addButtonAction").click(function() 
                    {
 
			$("table#monTab tbody").append('<tr id="indice">'
				+'<td>dddd</td>'
				+'<td>ddd</td>'
				+' <td> <a href="#" name="removeButton" ><img src="img/remove.jpeg" alt="" /></a> '
				+' <input type="hidden" name="dataToSend" value="critere:valeur"/>  </td> '
				+'</tr>');
 
	    //$('#monTab').dataTable();
 
                    }
                );
 
    		$("table#monTab").on('click', '[name="removeButton"]', function() 
    			{
    				//on supprime la ligne courante
    				$(this).parent().parent().remove()
			}
		);
 
 
		$("a#submitButton").click(function() 
                    {
			var toSend ;
			$('[name="dataToSend"]').each(function(index) {
					toSend += $(this).val()+" ; ";
			});
 
			alert(toSend);
 
                    }
                );
 
 
});     
</script>
 
</body>
</html>

Avez vous des idées ?

**SpaceFrog** · 18/07/2012, 11h40

c'est tout expliqué sur leur site

http://datatables.net/examples/api/add_row.html
http://www.datatables.net/forums/dis...-processing/p1

**pigpen** · 18/07/2012, 18h38

Hello,

merci pour ta réponse, en effet j'aurais du faire un peu plus de recherche :$

Pour l'ajout, ça semble simple (et mieux encore, ça fonctionne !!)

Par contre pour le delete j'ai des soucis, saurais tu m'indiquer mon erreur ?

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title></title>
  <meta name="Generator" content="Cocoa HTML Writer">
  <meta name="CocoaVersion" content="1138.47">
 
<SCRIPT type="text/javascript" src="jquery.js"></SCRIPT>
<SCRIPT type="text/javascript" src="js/jquery.dataTables.js"></SCRIPT>
 
 
 
</head>
<body>
 
<table id="monTab">
<thead>
	<tr>
 
		<th>test</th>	
		<th>test</th>
 
		<th>
			<a href="#" id="addButtonAction">
				<img src="img/add.gif" alt="ca marche pas" />
			</a>
		</th>
	</tr>
</thead>
 
<tbody>
 
</tbody>
 
</table>
 
<a href="#" id="submitButton">Envoyer</a>
 
 
<script type="text/javascript">
 
 
 
$(document).ready(function() 
{
 
	var oTable = $('#monTab').dataTable();
 
	function fnClickAddRow() {
		$('#monTab').dataTable().fnAddData( [
			"data",
			"DATA",
			'<a href="#" name="removeButton" ><img src="img/remove.jpeg" alt="" /></a> '
					+' <input type="hidden" name="dataToSend" value="critere:valeur"/>' ] );
	};
 
 
 
 
	$("a#addButtonAction").click(function() 
        {
             fnClickAddRow();
	});
 
 
 
 
 
 
    		$("table#monTab").on('click', '[name="removeButton"]', function() 
    			{
    				//on supprime la ligne courante
    				oTable.fnDeleteRow( $(this).parent().parent() );
			}
		);
 
 
		$("a#submitButton").click(function() 
                    {
			var toSend ;
			$('[name="dataToSend"]').each(function(index) {
					toSend += $(this).val()+" ; ";
			});
 
			alert(toSend);
 
                    }
                );
 
 
});     
</script>
 
</body>
</html>

Merci de vos conseils

**pigpen** · 19/07/2012, 10h47

Je viens de trouver une solution, si elle peut servir à quelqu'un :

Code :

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

1
2
3
4
5
6
7
8
9
$("table#monTab").on('click', '[name="removeButton"]', function() 
    			{
    				//on supprime la ligne courante
    				var row = $(this).closest("tr").get(0);
    				//cette version ne fonctionne pas 
    				//var $row = $(this).parents("tr").eq(0)
    				oTable.fnDeleteRow(oTable.fnGetPosition($row));
    			}
		);

**pigpen** · 23/07/2012, 18h44

Bonjour les amateurs de JQuerry,

Une petite question :
Je créé dynamiquement des lignes dans ma dataTable.
J'aimerais les enlever par un click sur un bouton dont le nom est "removeButton". Jusque là ok je passe bien dans mon "action"

Cependant je n'arrive pas à sélectionner mon élément ligne avec le code ci-dessous

précision : je suis en Jquery 1.5.1

Code :

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

1
2
3
4
5
6
7
8
9
10
$("table#monTab").on('click', '[name="removeButton"]', function() 
    			{
    				//on supprime la ligne courante
                               //cette version ne fonctionne pas en Jquery 1.5.1 	    				
                               var row = $(this).closest("tr").get(0);
                                //celle ci non plus (ni en 1.5.1 ni en lastest version)
    				//var $row = $(this).parents("tr").eq(0)
    				oTable.fnDeleteRow(oTable.fnGetPosition($row));
    			}
		);

Une aide serait la bien venue, je m'arrache les cheveux sur ce problème depuis 2 heures !!

merci d'avance.

**tavarlindar** · 23/07/2012, 20h22

Bonjour,

Ce n'est pas du jquery, mais voici une adresse de tuto qui m'a bien aider :

très vieux mais très bon à mon goût

Si cela peux vous aider ...

Bon courage ,

tavar

JQuery et dataTable [Plugin]

jQuery

Vue hybride

Discussions similaires

Partager

Partager