title: Datatable Lazy loading not working
body: <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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()
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"&gt;
  &lt;script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  
  &lt;table id="table"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;thumbnailUrl&lt;/th&gt;
        &lt;th&gt;albumId&lt;/th&gt;
        &lt;th&gt;id&lt;/th&gt;
        &lt;th&gt;title&lt;/th&gt;
        &lt;!-- &lt;th&gt;url&lt;/th&gt; --&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have Tried these question already.</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/35316220/lazy-loading-of-table-rows-in-jquery-datatables-1-10-10">Lazy loading of table rows in Jquery datatables 1.10.10?</a></li>
  <li><a href="https://stackoverflow.com/questions/34287402/datatables-cannot-read-property-length-of-undefined">DataTables: Cannot read property 'length' of undefined</a></li>
  </ul>