https://bayalagbuteegch.mn/js/datatable-editable.js

1function restoreRow ( oTable, nRow )
2{
3  var aData = oTable.fnGetData(nRow);
4  var jqTds = $('>td', nRow);
5  
6  for ( var i=0, iLen=jqTds.length ; i<iLen ; i++ ) {
7    oTable.fnUpdate( aData[i], nRow, i, false );
8  }
9  
10  oTable.fnDraw();
11}
12
13function editRow ( oTable, nRow )
14{
15  var aData = oTable.fnGetData(nRow);
16  var jqTds = $('>td', nRow);
17  jqTds[0].innerHTML = '<input type="text" value="'+aData[0]+'">';
18  jqTds[1].innerHTML = '<input type="text" value="'+aData[1]+'">';
19  jqTds[2].innerHTML = '<input type="text" value="'+aData[2]+'">';
20  jqTds[3].innerHTML = '<input type="text" value="'+aData[3]+'">';
21  jqTds[4].innerHTML = '<input type="text" value="'+aData[4]+'">';
22  jqTds[5].innerHTML = '<a class="edit-row" href="javascript:void(0)">Save</a>';
23}
24
25function saveRow ( oTable, nRow )
26{
27  var jqInputs = $('input', nRow);
28  oTable.fnUpdate( jqInputs[0].value, nRow, 0, false );
29  oTable.fnUpdate( jqInputs[1].value, nRow, 1, false );
30  oTable.fnUpdate( jqInputs[2].value, nRow, 2, false );
31  oTable.fnUpdate( jqInputs[3].value, nRow, 3, false );
32  oTable.fnUpdate( jqInputs[4].value, nRow, 4, false );
33  oTable.fnUpdate( '<a class="edit-row" href="javascript:void(0)">Edit</a>', nRow, 5, false );
34  oTable.fnDraw();
35}
36
37$(document).ready(function() {
38  var oTable = $("#datatable-editable").dataTable({
39    "sPaginationType": "full_numbers",
40    aoColumnDefs: [
41      {
42        bSortable: false,
43        aTargets: [-2, -1]
44      }
45    ]
46  });
47  var nEditing = null;
48
49  $('#add-row').click( function (e) {
50    e.preventDefault();
51
52    var aiNew = oTable.fnAddData( [ '', '', '', '', '',
53      '<a class="edit-row" href="javascript:void(0)">Edit</a>', '<a class="delete-row" href="javascript:void(0)">Delete</a>' ] );
54    var nRow = oTable.fnGetNodes( aiNew[0] );
55    editRow( oTable, nRow );
56    nEditing = nRow;
57  } );
58
59  $('#datatable-editable').on('click', 'a.delete-row', function (e) {
60    e.preventDefault();
61

62    var nRow = $(this).parents('tr')[0];
63    oTable.fnDeleteRow( nRow );
64  } );
65
66  $('#datatable-editable').on('click', 'a.edit-row', function (e) {
67    e.preventDefault();
68
69    /* Get the row as a parent of the link that was clicked on */
70    var nRow = $(this).parents('tr')[0];
71
72    if ( nEditing !== null && nEditing != nRow ) {
73      /* Currently editing - but not this row - restore the old before continuing to edit mode */
74      restoreRow( oTable, nEditing );
75      editRow( oTable, nRow );
76      nEditing = nRow;
77    }
78    else if ( nEditing == nRow && this.innerHTML == "Save" ) {
79      /* Editing this row and want to save it */
80      saveRow( oTable, nEditing );
81      nEditing = null;
82    }
83    else {
84      /* No edit in progress - let's start one */
85      editRow( oTable, nRow );
86      nEditing = nRow;
87    }
88  } );
89} );