Inline edit problem
Inline edit problem
James Wang
Posts: 3Questions: 2Answers: 0
I tried to use inline edit to edit data and store the after change data back to data array in memory. The code is listed below.
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Editor example - Simple inline editing</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.0/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.0/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init"></style>
<style type="text/css" class="init">
td.editable {
font-weight: bold;
}
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js">
</script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.2.0/js/dataTables.buttons.min.js">
</script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js">
</script>
<script type="text/javascript" language="javascript" >
$(document).ready(function () {
var editor;
var row, column;
var dataObjs = [
{
"ID": 0,
"FirstName": "Jane",
"LastName": "Doe"
},
{
"ID": 1,
"FirstName": "Balck",
"LastName": "Smith"
}];
$('#example').on('click', 'tbody td.editable', function (e) {
editor.inline(this);
});
editor = new $.fn.dataTable.Editor({
table: "#example",
idSrc: "ID",
fields: [
{
label: "FirstName:",
name: "FirstName"
}
]
});
console.log(dataObjs);
var table = $('#example').DataTable({
dom: 'rit',
data: dataObjs,
columns:
[
{ data: "ID"},
{ data: "FirstName", className: 'editable' },
{ data: "LastName" }
]
})
$('#example').on('click', 'tbody td.editable', function (e) {
row = table.cell(this).index().row;
column = table.cell(this).index().column;
editor.inline(this);
});
$('#example').on('blur', 'tbody td.editable input', function (e) {
var newVal = $(this).val();
dataObjs[row]["FirstName"] = newVal;
table.rows().invalidate();
table.draw();
});
});
</script>
</head>
<body>
<table id="example" class="display" cellspacing="0" style="width:50%">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
</table>
</body>
</html>
But when I run the code, some things wired happens. The problem can be reproduced following the steps below.
- Click the first name cell containing value "Jane", change the value to "Jane1".
- Move mouse to the cell containing last name "Doe", click mouse, the first name value remains "Jane1".
- Keeping mouse on the last name "Doe" without moving it, click the mouse again, the first name value changes back to "Jane".
- Move mouse to the cell of first name "Black" and click. Don't need to change anything.
- Move the mouse to anywhere out of cell "Black" and click, the value of cell "Jane" changes to "Jane1".
- After that, no matter where you click, the value "Jane1" remains.
Does anyone know what the problem is and how to fix it? Thanks.
James
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Hi James,
Currently Editor requires to make an Ajax call to the server to store the updated information. It will be possible with v1.6 to have it store the changed data in the client-side DataTable, but at the moment, if you require that ability you can use the
ajaxoption as a function to provide that implementation. Have a look at this thread and my linnked to example to see how you might be able to do that.Allan