var TableDatatablesEditable = function () {
var handleTable = function () {
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);
for (var i = 0; i < jqTds.length; i++) {
jqTds[i].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[i] + '">';
}
jqTds[7].innerHTML = '<a class="edit" href="">Save</a>';
jqTds[8].innerHTML = '<a class="cancel" href="">Cancel</a>';
oTable.fnDraw();
}
function saveRow(oTable, nRow) {
var jqInputs = $('input', nRow);
for (var i = 0; i < jqInputs.length-1; i++) {
oTable.fnUpdate(jqInputs[i].value, nRow, i, false);
}
oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 7, false);
oTable.fnDraw();
var form_data = {
// your data objects here
};
// AJAX call to save data
}
function cancelEditRow(oTable, nRow) {
var jqInputs = $('input',nRow);
for(var i=0;i<jqInputs.length-1;i++){
oTable.fnUpdate(jqInputs[i].value,nRow,i,false);
}
oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 7, false);
oTable.fnDraw();
}
var table = $('#sample_editable_1');
var oTable = table.dataTable({ // Your datatable initialization settings });
var tableWrapper = $("#sample_editable_1_wrapper");
var nEditing = null;
var nNew = false;
$('#sample_editable_1_new').click(function (e) {
e.preventDefault();
// Add new row logic
});
table.on('click', '.delete', function (e) {
e.preventDefault();
// Delete row logic
});
table.on('click', '.cancel', function (e) {
e.preventDefault();
// Cancel edit row logic
});
table.on('click', '.edit', function (e) {
e.preventDefault();
// Edit row logic
});
}
return {
//main function to initiate the module
init: function () {
handleTable();
}
};
}();
jQuery(document).ready(function() {
TableDatatablesEditable.init();
});
This is the JavaScript code snippet which includes functions to edit, save, and cancel rows in a DataTable.
The ajax part of the code sends the edited data from the table to a Spring MVC controller. The controller method receives the data and saves it using DataTemplatesave class.
@RequestMapping(value = "/save1", method = RequestMethod.GET)
public ModelAndView dataTemplateedit(HttpServletRequest req) {
// Extract data from request parameters
// Create ListDataDefinition object and save data using DataTemplatesave
return new ModelAndView("save1");
}
This is the Spring MVC Java code that handles the saving of edited table data.