dataTable serverside

HTML

<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.2.0/css/rowReorder.dataTables.min.css">
<script src="https://cdn.datatables.net/rowreorder/1.2.0/js/dataTables.rowReorder.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.8.0/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.8.0/jquery.modal.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/bootstrap-editable/js/bootstrap-editable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<div id="dialog" title="Basic dialog">


</div>
<table id="example" class="display" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>Order</th>
      <th>Place</th>
      <th>Name</th>
      <th>Delete</th>
    </tr>
  </thead>
</table>

<button id="addRow">Add New Row</button>
<table id="newRow">
  <tbody>
    <tr>
      <td><select id="selectbasic" name="selectbasic" class="form-control">
          <option value="1">option 1</option>
          <option value="2">option 2</option>
          <option value="2">option 3</option>
        </select>
      </td>
      <td>DVap
      </td>
      <td>
        www</td>
      <td><i class="fa fa-pencil-square" aria-hidden="true"></i>
        <i class="fa fa-minus-square" aria-hidden="true"></i> </td>
    </tr>
  </tbody>
</table>

CSS

table#newRow {
  display: none
}

JavaScript

$(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',
        type: 'text'
      }, {
        data: 'place',
        type: 'text',
        edit: true
      }, {
        data: 'name',
        type: 'text',
        edit: true
      }, {
        data: 'delete',
        type: 'text'
      }],
      "initComplete": function(oSettings) {
        $(this).on('click', "i.fa.fa-minus-square", function(e) {
          table.row($(this).closest('tr')).remove().draw();
        });


        $(this).on('click', 'i.fa.fa-pencil-square', function(e) {
          var rowData = table.row($(this).closest('tr')).data();
          var columns = table.settings().pop().aoColumns;
          var column = columns[table.column($(this).closest('td')).index()];
          var rowIndex = table.row($(this).closest('tr')).index();

          var html = '<form id="form">';
          for (var col in columns) {
            if (columns[col].type === 'text' && columns[col].edit) {
              html += '<input type="text" value="' + rowData[columns[col].data] + '" name="' + columns[col].data + '" placeholder="' + columns[col].data + '"/><br />';
            }
          }

          html += '<input type="hidden" name="rowIndex" id="rowIndex" value="' + rowIndex + '" />';
          html += '<input type="submit" id="update"/></form>';
          $('#dialog').html(html);
          $("#dialog").modal();
        });

      }
    });

    $('body').on('click', '#update', function(e) {
      e.preventDefault();

      $("#form").validate({
        rules: {
          name: {
            required: true,
            minlength: 8
          },
          place: {
            required: true,
           ...