when i refresh or close the browser my all stored data is lose. plz help

abrar_126

var TableEditable = function () {

return {

//main function to initiate the module
init: 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);
jqTds[0].innerHTML = '';
jqTds[1].innerHTML = '';
jqTds[2].innerHTML = '';
jqTds[3].innerHTML = '';
jqTds[4].innerHTML = 'Save';
jqTds[5].innerHTML = '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('Edit', nRow, 4, false);
oTable.fnUpdate('Delete', 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('Edit', nRow, 4, false);
oTable.fnDraw();
}

var oTable = $('#sample_editable_1').dataTable({
"aLengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
// set the initial value
"iDisplayLength": 5,
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page",
"oPaginate": {
"sPrevious": "Prev",
"sNext": "Next"
}
},
"aoColumnDefs": [{
'bSortable': false,
'aTargets': [0]
}
]
});

jQuery('#sample_editable_1_wrapper .dataTables_filter input').addClass("m-wrap medium"); // modify table search input
jQuery('#sample_editable_1_wrapper .dataTables_length select').addClass("m-wrap small"); // modify table per page dropdown
jQuery('#sample_editable_1_wrapper .dataTables_length select').select2({
showSearchInput : false //hide search box with special css class
}); // initialize select2 dropdown

var nEditing = null;

$('#sample_editable_1_new').click(function (e) {
e.preventDefault();
var aiNew = oTable.fnAddData(['', '', '', '',
'Edit', 'Cancel'
]);
var nRow = oTable.fnGetNodes(aiNew[0]);
editRow(oTable, nRow);
nEditing = nRow;
});

$('#sample_editable_1 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 :)");
});

$('#sample_editable_1 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;
}
});

$('#sample_editable_1 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) {
/* 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;


} else {
/* No edit in progress - let's start one */
editRow(oTable, nRow);
nEditing = nRow;
}
});


}

};







}();


i have this code but i do not have server side code and how to create this code mysql.

abrar_126

plz help

chin_ps

Try this ..

https://jquery-datatables-in-line-editing.googlecode.com/files/CreativePathExample.zip