Editable Datatable
| Username |
Full Name |
Points |
Notes |
Edit |
Delete |
|
alex
|
Alex Nilson
|
1234
|
power user
|
Edit
|
Delete
|
|
lisa
|
Lisa Wong
|
434
|
new user
|
Edit
|
Delete
|
|
nick12
|
Nick Roberts
|
232
|
power user
|
Edit
|
Delete
|
|
goldweb
|
Sergio Jackson
|
132
|
elite user
|
Edit
|
Delete
|
|
webriver
|
Antonio Sanches
|
462
|
new user
|
Edit
|
Delete
|
|
gist124
|
Nick Roberts
|
62
|
new user
|
Edit
|
Delete
|
<!-- HTML DATATABLES -->
<table class="table table-striped table-hover table-bordered" id="sample_editable_1">
<thead>
<tr>
<th>Username</th>
<th>Full Name</th>
<th>Points</th>
<th>Notes</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>
alex
</td>
<td>
Alex Nilson
</td>
<td>
1234
</td>
<td class="center">
power user
</td>
<td>
<a class="edit" href="javascript:;">
Edit </a>
</td>
<td>
<a class="delete" href="javascript:;">
Delete </a>
</td>
</tr>
<tr>
<td>
lisa
</td>
<td>
Lisa Wong
</td>
<td>
434
</td>
<td class="center">
new user
</td>
<td>
<a class="edit" href="javascript:;">
Edit </a>
</td>
<td>
<a class="delete" href="javascript:;">
Delete </a>
</td>
</tr>
<tr>
<td>
nick12
</td>
<td>
Nick Roberts
</td>
<td>
232
</td>
<td class="center">
power user
</td>
<td>
<a class="edit" href="javascript:;">
Edit </a>
</td>
<td>
<a class="delete" href="javascript:;">
Delete </a>
</td>
</tr>
<tr>
<td>
goldweb
</td>
<td>
Sergio Jackson
</td>
<td>
132
</td>
<td class="center">
elite user
</td>
<td>
<a class="edit" href="javascript:;">
Edit </a>
</td>
<td>
<a class="delete" href="javascript:;">
Delete </a>
</td>
</tr>
<tr>
<td>
webriver
</td>
<td>
Antonio Sanches
</td>
<td>
462
</td>
<td class="center">
new user
</td>
<td>
<a class="edit" href="javascript:;">
Edit </a>
</td>
<td>
<a class="delete" href="javascript:;">
Delete </a>
</td>
</tr>
<tr>
<td>
gist124
</td>
<td>
Nick Roberts
</td>
<td>
62
</td>
<td class="center">
new user
</td>
<td>
<a class="edit" href="javascript:;">
Edit </a>
</td>
<td>
<a class="delete" href="javascript:;">
Delete </a>
</td>
</tr>
</tbody>
</table>
<!-- CSS DATATABLES -->
<link href="assets/css/layout-datatables.css" rel="stylesheet" type="text/css" />
<!-- JS DATATABLES -->
<script type="text/javascript" src="assets/plugins/datatables/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="assets/plugins/datatables/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="assets/plugins/select2/js/select2.full.min.js"></script>
<script type="text/javascript">
function initTable7() {
function restoreRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
oTable.fnUpdate(aData[i], nRow, i, false);
}
oTable.fnDraw();
}
function editRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
jqTds[0].innerHTML = '<input type="text" class="form-control form-control-small" value="' + aData[0] + '">';
jqTds[1].innerHTML = '<input type="text" class="form-control form-control-small" value="' + aData[1] + '">';
jqTds[2].innerHTML = '<input type="text" class="form-control form-control-small" value="' + aData[2] + '">';
jqTds[3].innerHTML = '<input type="text" class="form-control form-control-small" value="' + aData[3] + '">';
jqTds[4].innerHTML = '<a class="edit" href="">Save';
jqTds[5].innerHTML = '<a class="cancel" href="">Cancel';
}
function saveRow(oTable, nRow) {
var jqInputs = $('input', nRow);
oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 4, false);
oTable.fnUpdate('<a class="delete" href="">Delete</a>', nRow, 5, false);
oTable.fnDraw();
}
function cancelEditRow(oTable, nRow) {
var jqInputs = $('input', nRow);
oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 4, false);
oTable.fnDraw();
}
var table = $('#sample_editable_1');
var oTable = table.dataTable({
"lengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
// set the initial value
"pageLength": 10,
"language": {
"lengthMenu": " _MENU_ records"
},
"columnDefs": [{ // set default column settings
'orderable': true,
'targets': [0]
}, {
"searchable": true,
"targets": [0]
}],
"order": [
[0, "asc"]
] // set first column as a default sort by asc
});
var tableWrapper = $("#sample_editable_1_wrapper");
tableWrapper.find(".dataTables_length select").select2({
showSearchInput: false //hide search box with special css class
}); // initialize select2 dropdown
var nEditing = null;
var nNew = false;
$('#sample_editable_1_new').click(function (e) {
e.preventDefault();
if (nNew && nEditing) {
if (confirm("Previose row not saved. Do you want to save it ?")) {
saveRow(oTable, nEditing); // save
$(nEditing).find("td:first").html("Untitled");
nEditing = null;
nNew = false;
} else {
oTable.fnDeleteRow(nEditing); // cancel
nEditing = null;
nNew = false;
return;
}
}
var aiNew = oTable.fnAddData(['', '', '', '', '', '']);
var nRow = oTable.fnGetNodes(aiNew[0]);
editRow(oTable, nRow);
nEditing = nRow;
nNew = true;
});
table.on('click', '.delete', function (e) {
e.preventDefault();
if (confirm("Are you sure to delete this row ?") == false) {
return;
}
var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow(nRow);
alert("Deleted! Do not forget to do some ajax to sync with backend :)");
});
table.on('click', '.cancel', function (e) {
e.preventDefault();
if (nNew) {
oTable.fnDeleteRow(nEditing);
nNew = false;
} else {
restoreRow(oTable, nEditing);
nEditing = null;
}
});
table.on('click', '.edit', function (e) {
e.preventDefault();
/* Get the row as a parent of the link that was clicked on */
var nRow = $(this).parents('tr')[0];
if (nEditing !== null && nEditing != nRow) {
/* Currently editing - but not this row - restore the old before continuing to edit mode */
restoreRow(oTable, nEditing);
editRow(oTable, nRow);
nEditing = nRow;
} else if (nEditing == nRow && this.innerHTML == "Save") {
/* Editing this row and want to save it */
saveRow(oTable, nEditing);
nEditing = null;
alert("Updated! Do not forget to do some ajax to sync with backend :)");
} else {
/* No edit in progress - let's start one */
editRow(oTable, nRow);
nEditing = nRow;
}
});
}
// Table Init
initTable7();
</script>
