dataTable serverside example

by jahn08

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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<h1>
 table 1
</h1>

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

<table id="new-row-template" style="display:none">
  <tbody>
    <tr>
      <td>999</td>
      <!-- Use a large number or row might be inserted in the middle -->
      <td>__NAME__</td>
      <td>__COUNTRY__</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>
<br>
<div class="pull-right">
  <button type="button" id="btn-cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
  <button type="button" id="btn-save" class="btn btn-primary" data-dismiss="modal">Save</button>
</div>

<br><br>
<div id="successMsg" style="display:none" class="alert alert-success" >
  <strong>Success!</strong> Members Saved.
</div>
              
<br>
<br>
<h1>
 table 2
</h1>
<br>
<br>
<table id="example2" class="display" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th> name</th>
    </tr>
  </thead>
</table>

CSS

div.addRow {
	  line-height: 45px;
	  background-color: #fff;
	  padding-left: 10px;
	  border-bottom: 1px solid;
	  border-top: 1px solid #e5e5e5;
	}
	
	tr.highlight td {
	  background-color: #D0ECE7 !important;
	}
	
	td.name-highlight {
	  background-color: #73C6B6 !important;
	}
	
	.border-highlight {
	  border-color: #73C6B6 !important;
	  border-width: 3px;
	}

JavaScript

$(document).ready(function() {
  var dataUrl = 'http://www.json-generator.com/api/json/get/ccTtqmPbkO?indent=2';
  var options = [{
    key: 'option 1',
    value: 1
  }, {
    key: 'option 2',
    value: 2
  }, {
    key: 'option 3',
    value: 3
  }];

  var rowCache = [];

  function mouseUp(event) {
    var names = $('#example tr td:nth-child(2)');
    var ctrl = $(document.elementsFromPoint(event.clientX, event.clientY)).filter('.name-highlight,input.border-highlight');

    if (ctrl.length > 0 && rowCache.length > 0) {
      var el = rowCache[0];
      var data = el.row.data();

      if (data.length > 0) {
      	var $td = ctrl;
      
        if (ctrl.is('input'))
        {
          ctrl.val(data[0].name);
          $td = ctrl.parent();
        }
        else
          ctrl.text(data[0].name);

        el.row.remove().draw();

        names.removeClass('name-highlight');
        names.find('input').removeClass('border-highlight');
        
        $td.animate({ 'background-color': "#BC8F8F" }, 3000);        $('#successMsg').fadeIn(2000).fadeOut(4000);
      }
    }

    rowCache = [];
  }

  $(document).ready(function() {
    var $table = $('#example');
    var dataTable = null;

    $('body').mouseup(mouseUp);

    $table.on('mousedown', 'td .fa.fa-minus-square', function(e) {
      dataTable.row($(this).closest("tr")).remove().draw();
    });

    $table.on('mousedown.edit', 'i.fa.fa-pencil-square', function(e) {
      enableRowEdit($(this));
    });

    $table.on('mousedown', 'input', function(e) {
      e.stopPropagation();
    });

    $table.on('mousedown.save', 'i.fa.fa-envelope-o', function(e) {
      updateRow($(this), true); // Pass save button to function.
    });

    $table.on('mousedown', '.select-basic', function(e) {
      e.stopPropagation();
    });

    dataTable = $table.DataTable({
      ajax: dataUrl,
      rowReorder: {
        dataSrc: 'order',
        selector: 'tr'
      },
      columns: [{
        data: 'order'
      }, {
   ...