Datatable inline editing without editor plugin

Question

I was using \'editor\' plugin for data table and following was the code:

Data table editor defined as:

        editor = new $.fn.dataTable.Editor( {         


        

Answer 1

I wrote my own code for editing inline and made it such that you can edit complete row and define the columns you want to be editable by user.

here : https://github.com/sinhashubh/datatable-examples

Steps to do this:

1. Handle click even on the clicked row/cell.

              $("#dtexample tbody").on('click', 'tr td', function (e) {
                   RoweditMode($(this).parent());
               });
   
           function RoweditMode(rowid) {
               var prevRow;
               var rowIndexVlaue = parseInt(rowid.attr("indexv"));
               if (editIndexTable == -1) {
                   saveRowIntoArray(rowid);
                   rowid.attr("editState", "editState");
                   editIndexTable = rowid.rowIndex;
                   setEditStateValue(rowid, rowIndexVlaue + 2);
               }
               else {
                   prevRow = $("[editState=editState]");
                   prevRow.attr("editState", "");
                   rowid.attr("editState", "editState");
                   editIndexTable = rowIndexVlaue;
                   saveArrayIntoRow(prevRow);
                   saveRowIntoArray(rowid);
                   setEditStateValue(rowid, rowIndexVlaue + 2);
               }
           }
          function saveRowIntoArray(cureentCells) {
               $.each(ColumnData, function (index, element) {
                   if (element.Editable == true) {
                       var htmlVal = $($(cureentCells).children('.' + element.Name)[0]).html();
                       EditRowData[element.Name] = htmlVal;
                   }
               });
           }
           function setEditStateValue(td1, indexRow) {
               for (var k in EditRowData) {
                   $($(td1).children('.' + k)[0]).html('');
               }
           }
   

2. On pressing Enter after inputting anything, bind enter input (You can change it to maybe a save button as you like.

       $("#dtexample tbody").on('keyup', 'input.userinput', function (e) {
                   if (e.keyCode == 13) {
                            updateRowData(this.parentNode.parentNode);
                   }
               });
   

3. Update function to make call to server with parameters.

            function updateRowData(currentCells) {
               var table = $("#dtexample").DataTable();
               var row = table.row(currentCells);
               rowid = currentCells.getAttribute('id');
               var UpdateRowData = [];
               $.each(ColumnData, function (index, element) {
                   if (element.Editable==true) {
                       UpdateRowData.push({
                           'pname': element.Name , 'pvalue': $($($(currentCells).children('.' + element.Name)).children('input')[0]).val()
                       });
                   }
               });
               console.log(UpdateRowData);
               UpdateRowData.push({ 'pname': 'rowid', 'pvalue': rowid });
               var parameter = "";
               for (i = 0; i < UpdateRowData.length; i++) {
                   if (i == UpdateRowData.length - 1)
                       parameter = parameter + UpdateRowData[i].pname + "=" + UpdateRowData[i].pvalue;
                   else
                       parameter = parameter + UpdateRowData[i].pname + "=" + UpdateRowData[i].pvalue + "&";
               }
               $.ajax({
                   type: 'POST',
                   url: '/WebService.asmx/UpdateTableData',
                   data: parameter,
                   success: function (data) {
                       var table = $('#dtexample').DataTable();
                       table.draw('page');
                   }
               });
           }