JQuery et dataTable

Version imprimable

JQuery et dataTable

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:

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 ?

18/07/2012, 11h40
SpaceFrog

c'est tout expliqué sur leur site

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

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:

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

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

Code:

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

datatable et sélection de ligne créée dynamiquement

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:

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.

23/07/2012, 20h22
tavarlindar

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