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( {
        ajax: '/contact/' + Contact.id,
        table: "#contact-datatable",
        fields: [ {
                    name: "id",
                  }, {
                    name: "category",
                    type: "check",
                    options: [
                              { label: 'Science', value: "Science" },
                              { label: 'Maths', value: 'Maths' },
                              { label: 'Economics', value: 'Economics' },
                             ]
                 }
                    ................
              ]
    });

.....

$('#contact-datatable').on( 'click', 'tbody td:not(:first-child)', function (e) {
                editor.inline( this, { submitOnBlur: true } );
            } );

Attaching the page with this: When we click on Category, it shows a dropdown for editing (using editor plugin).

But the problem is datatables' editor plugin is not opensource and my project doesn't allow a payable plugin at all.

Can anyone please help me for inline editing in datatables with out 'editor' plugin?

Following is the code I wrote without editor :

Contact.dataTable = $('#contact-datatable').dataTable( {
        "ajax": {
                "url" : '/Contact/list/' + Contact.id,
                "dataSrc": function(check) {
                   check.id = Contact.id;
                   return json.check;
                  },
                },
            "responsive": true,
            "order": [],
            "columns": [
                { "data": "id"},
                { "data": "category" },
                { "data": "course" },
                ]
        } );

Category and Course will be a dropdown - and this has to be edit inline. Below attached a page example.

I need 'Category' as an inline editor dropdown and then there will be a button to save

Answer 1

Datatables rock! And SpryMedia let us play with it for free! I'm not 100% sure I've used the Editor Plugin despite buying it but I am pleased that I've contributed to its development in some way. One of the main reasons I've not used the plugin is because I was too skint to afford it for a while so wrote my own versions and that's really not that difficult. The steps are quite simple:

• Detect click on row (you've already done this)
• Get the data from the row (not at all hard)
• Populate a form with that data (probably within a modal)
• Update the server with the new values once the form is submitted
• Update the row once the server has been updated

The plugin makes all that easy and allows you to figure out the backend as well. The steps above aren't all that difficult but I've not come across something that does it all for you except for the Editor Plugin. Work through the steps and you'll get there.

Answer 2

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('<input value="' + EditRowData[k] + '" class="userinput"  style="width: 99% " />');
               }
           }
   

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');
                   }
               });
           }