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.

• Lazy loading of table rows in Jquery datatables 1.10.10?
• DataTables: Cannot read property 'length' of undefined

Answer 1

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.