Edit Datatable Cells Inline without post
Edit Datatable Cells Inline without post
Peter Hanna
Posts: 2Questions: 1Answers: 0
I am evaluating Datatables 1.10.12 and the editor in "trial mode". Note the dataTables.editor.min.js is the one downloaded as part of the trial. This may need to be re-referenced in any modifications you make.
I want to be able to edit cells in a STATIC html datatable without any ajax posting.
I have had some success in the static table edits. I.E You can click a cell and type but the updates won't stick?
After the first cell click, I can also no longer click to edit other cells for some reason.
Can you please advise where I am going wrong or what needs to be changed to accomplish this
The complete HTML is below.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.jqueryui.min.css"/>
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.0/css/select.dataTables.min.css"/>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.1/css/buttons.dataTables.min.css"/>
<link rel="stylesheet" href="editor.dataTables.min.css"/>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<div style="width: 100%; float: left; padding: 10px">
<strong><u>Sample Table</u></strong>
<table class="table table-striped table-bordered table-hover" id="dt_mytable">
<thead>
<tr >
<th>Column1 Heading</th>
<th>Column2 Heading</th>
<th>Column3 Heading</th>
<th>Column4 Heading</th>
</tr>
</thead>
<tbody>
<tr id="row_9">
<td>Row 0 Column 1</td>
<td>Row 0 Column 2</td>
<td>Row 0 Column 3</td>
<td>Row 0 Column 4</td>
</tr>
<tr id="row_1">
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
<td>Row 1 Column 3</td>
<td>Row 1 Column 4</td>
</tr>
<tr id="row_2">
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>
<td>Row 2 Column 3</td>
<td>Row 2 Column 4</td>
</tr>
<tr id="row_3">
<td>Row 3 Column 1</td>
<td>Row 3 Column 2</td>
<td>Row 3 Column 3</td>
<td>Row 3 Column 4</td>
</tr>
<tr id="row_4">
<td>Row 4 Column 1</td>
<td>Row 4 Column 2</td>
<td>Row 4 Column 3</td>
<td>Row 4 Column 4</td>
</tr>
<tr id="row_5">
<td>Row 5 Column 1</td>
<td>Row 5 Column 2</td>
<td>Row 5 Column 3</td>
<td>Row 5 Column 4</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
$(document).ready(function ()
{
var editor;
// Set up the editor
editor = new $.fn.dataTable.Editor( {
table: "#dt_mytable",
fields: [
{
label: "Column1 Heading",
name: "column1"
}, {
label: "Column2 Heading:",
name: "column2"
}, {
label: "Column3 Heading",
name: "column3"
}, {
label: "Column4 Heading",
name: "column4"
}
]
} );
// Activate an inline edit on click of a table cell
$('#dt_mytable').on( 'click', 'tbody td.editable', function (e) {
editor.inline( this );
} );
$('#dt_mytable').DataTable( {
dom: "Bfrtip",
columns: [
{ data: "column1" , className: 'editable'},
{ data: "column2", className: 'editable' },
{ data: "column3", className: 'editable' },
{ data: "column4", className: 'editable' }
],
select: true
} );
});//Close Document Ready Function
</script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.jqueryui.min.js"></script>
<script src="dataTables.editor.min.js"></script>
</body>
</html>
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
This isn't a built in feature of Editor (yet) I'm afraid. It will be coming in 1.6, but in the mean time, i put this little example together showing how a local edit can be done: http://live.datatables.net/cazatabe/1/edit . It doesn't do create or delete, although those could be added if you need them. The key is to override the
ajaxcall that Editor makes and replace it with a local data update.As I say, that is a feature that will be built into 1.6 (likely to be released in roughly 2 months time).
Regards,
Allan