dataTable - ServerSide

by Wayne Humphrey

HTML

<link rel="stylesheet" href="http://cdn.datatables.net/1.10.4/css/jquery.dataTables.css">
<script src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@coreui/coreui/dist/css/coreui.min.css">
<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/@coreui/coreui/dist/js/coreui.min.js"></script>
<div class="container-fluid">

  <div class="animated fadeIn">
    <div class="card">
      <div class="card-header">
        <i class="fa fa-edit"></i> DataTables
      </div>
      <div class="card-body">
        <button type="button" class="btn btn-primary" id="reload">reload table</button>
  <div class="btn-group" role="group" aria-label="Sort">
    <button type="button" class="btn btn-secondary toggleCols" data-column="0">First Name</button>
    <button type="button" class="btn btn-secondary toggleCols" data-column="0">Last Name</button>
  </div>
  <br><br>
        <table id="dtable" class="table table-striped table-bordered datatable">
          <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>
      </div>
    </div>
  </div>

</div>


<body class="app">

  <br>
  <br>
  <table id="dtable2" class="table table-striped table-bordered datatable dataTable no-footer" 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>


</body>

CSS

body {
  margin: 10px;
}

JavaScript

$(document).ready(function() {
  var url = 'https://next.json-generator.com/api/json/get/VybZdV2lI';
  var table = $('#dtable').DataTable({
    'processing': true,
    'serverSide': false,
    "pageLength": 5,
    scrollY: 200,
    scroller: {
      loadingIndicator: true
    },
    '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());
  });
  //    
});