Jquery Datatables Add new row button inside table as a row

Question

I am using: jquery.dataTables.js from: https://datatables.net

how can I make this button Add New Row be inside the table as a row? right now is outside the table

jsfiddle: http://jsfiddle.net/5L2qy092/4/

html:

<table id="example" class="display" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>order</th>
      <th>name</th>
      <th>country</th>
      <th>delete</th>
    </tr>
  </thead>
</table>

<button id="addRow">Add New Row</button>
<table id="newRow">
  <tbody>
    <tr>
      <td>Line 2
        <input type="hidden" value="2" /> </td>
      <td>DVap
        <input type="hidden" value="DVap" /> </td>
      <td>
        <input type="text" value="22" /> </td>
      <td>
        <i class="fa fa-minus-square" aria-hidden="true"></i>  </td>
    </tr>
  </tbody>
</table>

jquery:

 $(document).ready(function() {
    var dt = $('#example').dataTable();
    dt.fnDestroy();
  });

  $(document).ready(function() {
    //var url = 'http://www.json-generator.com/api/json/get/ckDfqBChNK?indent=2';
    var url = 'http://www.json-generator.com/api/json/get/bQzyuEGndu?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();
    });
  });

Answer 1

If you want the button as a new row in the table, you can use my first answer.

But, in that case, we will have to deal with sorting, deleting etc.

I think it's best to 'simulate' a new row. Like this:

$(document).ready(function() {
    var dt = $('#example').dataTable();
    dt.fnDestroy();
  });

  $(document).ready(function() {
    //var url = 'http://www.json-generator.com/api/json/get/ckDfqBChNK?indent=2';
    var url = 'http://www.json-generator.com/api/json/get/bQzyuEGndu?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();
           
        });
     
      
      }
      
    });
    
    $('#example').css('border-bottom', 'none');
    $('<div class="addRow"><button id="addRow">Add New Row</button></div>').insertAfter('#example');
    $('#addRow').on('click', function() {
        
          var rowHtml = $("#newRow").find("tr")[0].outerHTML

          table.row.add($(rowHtml)).draw();
          
          table.page( 'last' ).draw( 'page' );
        
        });
   
  });

table#newRow {
  display: none
}

div.addRow {
    line-height: 45px;
    background-color: #fff;
    padding-left: 10px;
    border-bottom: 1px solid;
    border-top: 1px solid #e5e5e5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

<script src="https://cdn.datatables.net/rowreorder/1.2.0/js/dataTables.rowReorder.min.js"></script>

<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css" rel="stylesheet"/>

<link href="https://cdn.datatables.net/rowreorder/1.2.0/css/rowReorder.dataTables.min.css" rel="stylesheet"/>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


<table id="example" class="display" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>order</th>
      <th>name</th>
      <th>country</th>
      <th>delete</th>
    </tr>
  </thead>
</table>

<table id="newRow">
  <tbody>
    <tr>
      <td>Line 2
        <input type="hidden" value="2" /> </td>
      <td>DVap
        <input type="hidden" value="DVap" /> </td>
      <td>
        <input type="text" value="22" /> </td>
      <td>
        <i class="fa fa-minus-square" aria-hidden="true"></i>  </td>
    </tr>
  </tbody>
</table>

Answer 2

I've made some changes to the Fiddle, see if that's the result you want.

 $(document).ready(function() {
//var url = 'http://www.json-generator.com/api/json/get/ckDfqBChNK?indent=2';
var url = 'http://www.json-generator.com/api/json/get/bQzyuEGndu?indent=2';
var table = $('#example').DataTable({
  ajax: url,
  rowReorder: {
    dataSrc: 'order'
  },
  columns: [{
    data: 'order'
  }, {
    data: 'place'
  }, {
    data: 'name'
  }, {
    data: 'delete'
  }],

   "fnDrawCallback": function() {
    try {addRow();} catch(e) {}
},

  "initComplete": function(oSettings) {

    $(this).on('click', "i.fa.fa-minus-square", function(e) {

      table.row( $(this).closest('tr') ).remove().draw();

      addRow();

    }).on('click', '#addRow', function() {

      var rowHtml = $("#newRow").find("tr")[0].outerHTML

      table.row.add($(rowHtml)).draw();

      addRow();

    });

   addRow();

  }

});


function addRow() {

   table.rows().eq(0).each( function ( i ) {
   var row = table.row( i );
   row.child.remove();
   });

    var line = table.row( $('#example').find('tr:last') );  

    line.child('<button id="addRow">Add New Row</button>').show(); 

   }

 });

http://jsfiddle.net/Leon_Klaj/9grm4wdc/