Datatable Lazy loading not working

Question

I have been trying to use lazy loading feature of datatable, but it's loading all the data at once, I'm not able to figure it out, what's going wrong.

var dataTable = dataTable || {};

dataTable = (function(namespace) {
  var api = "https://jsonplaceholder.typicode.com/photos";

  namespace.drawDataTable = function() {
    try {
      $('#table').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
          "url": api,
          "dataSrc": ""
        },
        "columns": [{
            "mData": "thumbnailUrl"
          },
          {
            "mData": "albumId"
          },
          {
            "mData": "id"
          },
          {
            "mData": "title"
          },
          // { "mData": "url" }
        ],
        "scrollY": 200,
        "scroller": {
          loadingIndicator: true
        }
      });
    } catch (e) {
      console.error(e.message);
    }
  }

  return namespace;
}(dataTable = dataTable || {}));

$(document).ready(function() {
  dataTable.drawDataTable()
})

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="table">
  <thead>
    <tr>
      <th>thumbnailUrl</th>
      <th>albumId</th>
      <th>id</th>
      <th>title</th>
      <!-- <th>url</th> -->
    </tr>
  </thead>
</table>

I have Tried these question already.

score 0 · Accepted Answer · answered Aug 08 '18 at 21:45

For loading data in chunks you need to write server-side script preferably using helper class SSP (ssp.class.php) available in DataTables distribution. That way data will be returned in chunks and consumed by front-end DataTables plug-in.

Your link https://jsonplaceholder.typicode.com/photos returns all records at once and DataTables front-end plug-in is unable to extract portion of it and still have to download the whole JSON file.

See Server-side processing for more details on what data needs to be returned in order for lazy loading to work.

Datatable Lazy loading not working

1 Answers1