Jquery - Edit and Save button in datatable to submit a POST request to Nodejs

Question

I am new to jquery and am using datatable to create a table dynamically from nodejs backend on Get request (using pug template and jquery). I have been able to successfully get the data from Nodejs and load the datatable.

However, I am now trying to add an edit button which will display an editable text box (same as the jsfiddle link) along with a Save button which will trigger a POST call to update the data in my underlying SQL table via Nodejs (using req.body). I found a solution that I am trying to achieve below (minus the Save part), but I haven't been able to make it work with my current code since rows are dynamically populating from Nodejs.

I tried looking for Datatable editor online but unfortunately we do not have enough budget to support this plugin.

JSFiddle link - http://jsfiddle.net/55rfa8zb/1/

Dynamically getting table value in PUG from Nodejs (res.render + variables)

  <center><div class='well'>
  table(id='dtable' name='dtable' class='dtable')
    thead
      tr
        th= tbl_header1
        th= tbl_header2
        th= tbl_header3
        th= tbl_header4
        th= tbl_header5
        th= tbl_header6
        th= tbl_header7
        th= tbl_header8
        th= tbl_header9
        th= tbl_header10
        th= tbl_header11
        th= tbl_header12
        th= tbl_header13
        th= tbl_header14
    tbody
      each item in items
        if (typeof(item.schema_name) !== 'undefined')
          tr
            td= item.entity_id
            td= item.database_name
            td= item.schema_name
            td= item.entity_name
            td= item.entity_type
            td= item.db_user
            td= item.entity_owner
            td= item.external_table_location
            td= item.entity_description
            td= item.status
            td= item.latest_refresh_column
            td= item.dw_create_date
            td= item.dw_update_date
            td
              button(type="button", id="edit") Edit

Jquery: I also tried below jquery to replace row with the text input to each footer cell but my data table wont load at all when I use below script.

script.
  $(document).ready(function() {
    var mytable = $('#dtable').DataTable({orderCellsTop: true, fixedHeader: true});
    // Setup - add a text input to each footer cell
    $('#dtable thead tr').clone(true).appendTo( '#dtable thead' );
    $('#dtable thead tr:eq(1) th').each( function (i) {
      var title = $(this).text();
      $(this).html( '<input type="text" placeholder="Search '+title+'" />' );

      $( 'input', this ).on( 'keyup change', function () {
        if ( mytable.column(i).search() !== this.value ) {
          mytable
            .column(i)
            .search( this.value )
            .draw();
        }
      });
    });
  });

Answer 1

I was able to implement the solution similar to Jfiddle link above. Working solution below:

script.
      $(document).ready(function() {
        $("#dtable").on('mousedown.edit', "i.fa.fa-pencil-square", function(e) {
          $(this).removeClass().addClass("fa fa-envelope-o");
          var $row = $(this).closest("tr").off("mousedown");
          var $tds = $row.find("td").not(':first').not(':last');

          $.each($tds, function(i, el) {
            var txt = $(this).text();
            $(this).html("").append("<input type='text' value=\""+txt+"\">");
          });
        });
        $("#dtable").on('mousedown', "input", function(e) {
          e.stopPropagation();
        });
        $("#dtable").on('mousedown.save', "i.fa.fa-envelope-o", function(e) {
          $(this).removeClass().addClass("fa fa-pencil-square");
          var $row = $(this).closest("tr");
          var $tds = $row.find("td").not(':first').not(':last');

          $.each($tds, function(i, el) {
            var txt = $(this).find("input").val()
            $(this).html(txt);
          });
        });
        $("#dtable").on('mousedown', "#selectbasic", function(e) {
          e.stopPropagation();
        });
        $('#dtable thead tr').clone(true).appendTo( '#dtable thead' );
        var mytable = $('#dtable').DataTable({fixedHeader:true, autoWidth: true});
        $('#dtable thead tr:eq(1) th').each( function (i) {
          var title = $(this).text();
          $(this).html( '<input type="text" placeholder="Search '+title+'" />' );

          $( 'input', this ).on( 'keyup change', function () {
            if ( mytable.column(i).search() !== this.value ) {
              mytable
                .column(i)
                .search( this.value )
                .draw();
            }
          });
        });
      });