dataTable serverside example

by Wayne Humphrey

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<button type="button" class="btn btn-primary" id="reload">reload table</button>

<br>
<br>
<table id="example" class="display" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
</table>

CSS

body {
    margin: 10px;
}

JavaScript

$(document).ready(function () {

  var url = 'https://next.json-generator.com/api/json/get/EyrvcUfAV';

  var table = $('#example').DataTable({
    'processing': false,
    'serverSide': false,
    'ajax': {
      type: 'POST',
      'url': url,
      'data': function (d) {
        console.log(d.order);
        return JSON.stringify( d );
      }
    }

  });
  //
  //
  $('#reload').click(function (e) {
    table.ajax.reload();
  });
  //
  $('.toggleCols').click(function (e) {
      e.preventDefault();
      var column = table.column( $(this).attr('data-column') );
       column.visible( ! column.visible() );
  });    
  //    
});