Bonjour,

On m'a demander de réaliser une todoList sans appel serveur et donc avec LocalStorage.
Jusque la pas de problème cependant je bloque sur une ou deux petite choses :
Je souhaite sauvegarder a chaque changement dans ma TD et éditer tout les champs, or aucun des deux ne fonctionne correctement.
Je pense qu'étant néophyte totale en JS, je ne dois voir l'énorme erreur que je commets mais la j'avoue ne plus comprendre pour les plugin n'ont pas le comportement attendu
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
</style>
        <script src="script/jquery.js"></script>
        <script src="script/jquery.jeditable.js"></script>
        <script src="script/jquery.dataTables.js"></script>
        <script src="script/jquery-ui.js"></script>
        <script>
		var giCount = 1;
		if (!localStorage)
		{
			alert('Votre Navigateur ne supporte pas Local Storage. Veuillez utiliser Google Chrome.');
		}
// Local Storage
		function SaveLS(datas)	
		{
	    	localStorage.setItem("Task", JSON.stringify(datas));
	   	}
 
	   	function LectureLS(Task)
	   	{
				var data = localStorage.getItem(Task);
				var res = JSON.parse(data);
				return (res);
	   	}
 
// Add Row	
	   	function fnClickAddRow() 
		{
			$('#list').dataTable().fnAddData
			([
				giCount+".1",
				giCount+".2",
				giCount+".3",
				giCount+".4" 
			]);	
			giCount++;
		}
 
// Initialisation	
		$(document).ready(function()
		{
		//appel
			$('#list').dataTable(
			{
				"bJQueryUI": true,
				"bStateSave": true,
				"fnDrawCallback": function( oSettings ) 
				{ 
					alert( 'DataTables has redrawn the table' );
					//SaveLS(data);
    			},
				"aaData" : LectureLS("Task"),
				"aoColumns": 
				[
					{ "sTitle": "Tache" },
					{ "sTitle": "Date de rendu" },
					{ "sTitle": "Fait/ A Faire" },
					{ "sTitle": "Priorite"}
				]			
			});
 
		//edition
			var oTable = $('#list').dataTable(); 
		    oTable.$('td').editable(function(value, settings) 
		    { 
		    	return(value);
			},
		    {
		    	"callback": function( sValue, y ) 
		        {
		            var aPos = oTable.fnGetPosition( this );
		            oTable.fnUpdate( sValue, aPos[0], aPos[1] );
		            var data = oTable.fnGetData( this );
		        },
		        "height": "14px",
		        "width": "100%"
		   	});
		   	//bouton ajout de tache
			$('#addData').click(function(){
			fnClickAddRow();
			return false;
		});
		}); 
		</script>
        <title>Todo-List</title>
    </head>
 
    <body>
    	<header>
            <h1>Todo List</h1>
    	</header>
            <section>
            	<a href="#" id="addData">Ajouter une nouvelle tache</a>
            	<table id="list" width="100%">
				    <thead>
 
				        <tr>
				            <th>Tache</th>
				            <th>Date "A faire"</th>
				            <th>Fait</th>
				            <th>Priorite</th>
				        </tr>
				    </thead>
				    <tbody>
				        <tr id="1">
				            <td>toto</td>
				            <td>Demain</td>
				            <td>A Faire</td>
				            <td>Urgent</td>
				        </tr>
				    </tbody>
				</table>
Voila mon code si quelqu'un a une idée je suis preneuse ! Merci d'avance !