Current state
This commit is contained in:
160
public/assets/js/table_editable.js
Normal file
160
public/assets/js/table_editable.js
Normal file
@@ -0,0 +1,160 @@
|
||||
$(function () {
|
||||
|
||||
function editableTable() {
|
||||
|
||||
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 small" value="' + aData[0] + '">';
|
||||
jqTds[1].innerHTML = '<input type="text" class="form-control small" value="' + aData[1] + '">';
|
||||
jqTds[2].innerHTML = '<input type="text" class="form-control small" value="' + aData[2] + '">';
|
||||
jqTds[3].innerHTML = '<input type="text" class="form-control small" value="' + aData[3] + '">';
|
||||
jqTds[4].innerHTML = '<div class="text-center"><a class="edit btn btn-success" href="">Save</a> <a class="delete btn btn-danger" href=""><i class="fa fa-times-circle"></i> Remove</a></div>';
|
||||
}
|
||||
|
||||
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('<div class="text-center"><a class="edit btn btn-dark" href=""><i class="fa fa-pencil-square-o"></i>Edit</a> <a class="delete btn btn-danger" href=""><i class="fa fa-times-circle"></i> Remove</a></div>', nRow, 4, 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 btn btn-dark" href=""><i class="fa fa-pencil-square-o"></i>Edit</a>', nRow, 4, false);
|
||||
oTable.fnDraw();
|
||||
}
|
||||
|
||||
var oTable = $('#table-editable').dataTable({
|
||||
"aLengthMenu": [
|
||||
[5, 15, 20, -1],
|
||||
[5, 15, 20, "All"] // change per page values here
|
||||
],
|
||||
"sDom" : "<'row'<'col-md-6 filter-left'f><'col-md-6'T>r>t<'row'<'col-md-6'i><'col-md-6'p>>",
|
||||
"oTableTools" : {
|
||||
"sSwfPath": "assets/plugins/datatables/swf/copy_csv_xls_pdf.swf",
|
||||
"aButtons":[
|
||||
{
|
||||
"sExtends":"pdf",
|
||||
"mColumns":[0, 1, 2, 3],
|
||||
"sPdfOrientation":"landscape"
|
||||
},
|
||||
{
|
||||
"sExtends":"print",
|
||||
"mColumns":[0, 1, 2, 3],
|
||||
"sPdfOrientation":"landscape"
|
||||
},{
|
||||
"sExtends":"xls",
|
||||
"mColumns":[0, 1, 2, 3],
|
||||
"sPdfOrientation":"landscape"
|
||||
},{
|
||||
"sExtends":"csv",
|
||||
"mColumns":[0, 1, 2, 3],
|
||||
"sPdfOrientation":"landscape"
|
||||
}
|
||||
]
|
||||
},
|
||||
// set the initial value
|
||||
"iDisplayLength": 10,
|
||||
"bPaginate": false,
|
||||
"sPaginationType": "bootstrap",
|
||||
"oLanguage": {
|
||||
"sLengthMenu": "_MENU_ records per page",
|
||||
"oPaginate": {
|
||||
"sPrevious": "Prev",
|
||||
"sNext": "Next"
|
||||
},
|
||||
"sSearch": ""
|
||||
},
|
||||
"aoColumnDefs": [{
|
||||
'bSortable': false,
|
||||
'aTargets': [0]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
jQuery('#table-edit_wrapper .dataTables_filter input').addClass("form-control medium"); // modify table search input
|
||||
jQuery('#table-edit_wrapper .dataTables_length select').addClass("form-control xsmall"); // modify table per page dropdown
|
||||
|
||||
var nEditing = null;
|
||||
|
||||
$('#table-edit_new').click(function (e) {
|
||||
e.preventDefault();
|
||||
var aiNew = oTable.fnAddData(['', '', '', '',
|
||||
'<p class="text-center"><a class="edit btn btn-dark" href=""><i class="fa fa-pencil-square-o"></i>Edit</a> <a class="delete btn btn-danger" href=""><i class="fa fa-times-circle"></i> Remove</a></p>'
|
||||
]);
|
||||
var nRow = oTable.fnGetNodes(aiNew[0]);
|
||||
editRow(oTable, nRow);
|
||||
nEditing = nRow;
|
||||
});
|
||||
|
||||
$('#table-editable a.delete').live('click', 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-editable a.cancel').live('click', function (e) {
|
||||
e.preventDefault();
|
||||
if ($(this).attr("data-mode") == "new") {
|
||||
var nRow = $(this).parents('tr')[0];
|
||||
oTable.fnDeleteRow(nRow);
|
||||
} else {
|
||||
restoreRow(oTable, nEditing);
|
||||
nEditing = null;
|
||||
}
|
||||
});
|
||||
|
||||
$('#table-editable a.edit').live('click', 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) {
|
||||
restoreRow(oTable, nEditing);
|
||||
editRow(oTable, nRow);
|
||||
nEditing = nRow;
|
||||
} else if (nEditing == nRow && this.innerHTML == "Save") {
|
||||
/* This row is being edited and should be saved */
|
||||
saveRow(oTable, nEditing);
|
||||
nEditing = null;
|
||||
// alert("Updated! Do not forget to do some ajax to sync with backend :)");
|
||||
} else {
|
||||
/* No row currently being edited */
|
||||
editRow(oTable, nRow);
|
||||
nEditing = nRow;
|
||||
}
|
||||
});
|
||||
|
||||
$('.dataTables_filter input').attr("placeholder", "Search a user...");
|
||||
|
||||
};
|
||||
|
||||
editableTable();
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user