Todo List avec DataTables,Jeditable et LocalStorage
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:
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 !