title: Jquery Datatables Editing row
body: <p>I am using: jquery.dataTables.js from: <a href="https://datatables.net" rel="noreferrer">https://datatables.net</a></p>
  
  <p>Issue 1 - Drag and Drop does not work after the user add a new row</p>
  
  <p>What I need:
  make the row editable after click in the pencil.</p>
  
  <p>similar to this sample:
  <a href="https://editor.datatables.net/examples/simple/inTableControls.html" rel="noreferrer">https://editor.datatables.net/examples/simple/inTableControls.html</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;table id="example" class="display" width="100%" cellspacing="0"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;order&lt;/th&gt;
        &lt;th&gt;name&lt;/th&gt;
        &lt;th&gt;country&lt;/th&gt;
        &lt;th&gt;action&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
  &lt;/table&gt;
  
  &lt;button id="addRow"&gt;Add New Row&lt;/button&gt;
  &lt;table id="newRow"&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;select id="selectbasic" name="selectbasic" class="form-control"&gt;
            &lt;option value="1"&gt;option 1&lt;/option&gt;
            &lt;option value="2"&gt;option 2&lt;/option&gt;
            &lt;option value="2"&gt;option 3&lt;/option&gt;
          &lt;/select&gt;
        &lt;/td&gt;
        &lt;td&gt;DVap
         &lt;/td&gt;
        &lt;td&gt;
         www&lt;/td&gt;
        &lt;td&gt;&lt;i class="fa fa-pencil-square" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;i class="fa fa-minus-square" aria-hidden="true"&gt;&lt;/i&gt;  &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>jquery:</p>
  
  <pre><code>  $(document).ready(function() {
      var dt = $('#example').dataTable();
      dt.fnDestroy();
    });
  
    $(document).ready(function() {
      var url = 'http://www.json-generator.com/api/json/get/ccTtqmPbkO?indent=2';
      var table = $('#example').DataTable({
        ajax: url,
        rowReorder: {
          dataSrc: 'order',
        },
        columns: [{
          data: 'order'
        }, {
          data: 'place'
        }, {
          data: 'name'
        }, {
          data: 'delete'
        }],
        "initComplete": function(oSettings) {
          $(this).on('click', "i.fa.fa-minus-square", function(e) {
            table.row( $(this).closest('tr') ).remove().draw();
          });
        }
      });
  
      // add row
      $('#addRow').click(function() {
        //t.row.add( [1,2,3] ).draw();
        var rowHtml = $("#newRow").find("tr")[0].outerHTML
        console.log(rowHtml);
        table.row.add($(rowHtml)).draw();
      });
    });
  </code></pre>
  
  <p>jsfiddle:
  <a href="http://jsfiddle.net/5L2qy092/5/" rel="noreferrer">http://jsfiddle.net/5L2qy092/5/</a></p>