How can i configure Jquery DataTable to not load all content on first load

e.g if i have 1000 records, DataTable will load all in first load this can be heavy though. how about loading each content when click on pagination part? Like This

$(document).ready( function () {
  $('#example').dataTable( {
    "bServerSide": true,
    "sAjaxSource": "xhr.php"
  } );
} );

There is ServerSide configuration for alike pagination please let me know, if my question is duplicate just shout out.

How can i configure Jquery DataTable to not load all content on first load

e.g if i have 1000 records, DataTable will load all in first load this can be heavy though. how about loading each content when click on pagination part? Like This

$(document).ready( function () {
  $('#example').dataTable( {
    "bServerSide": true,
    "sAjaxSource": "xhr.php"
  } );
} );

There is ServerSide configuration for alike pagination please let me know, if my question is duplicate just shout out.

• javascript
• jquery
• datatable

• mobisoftinfotech./resources/blog/web-programming/… – Mujammil H Kazi Commented Jan 25, 2016 at 8:45

2 Answers 2

Use the "deferLoading" attribute:

https://datatables/examples/server_side/defer_loading.html

Check here full jquery example jquery-datatable-ajax-tutorial-with-example

var studentTable;

jQuery(document).ready(function() {

studentTable = jQuery("#studentListTable").dataTable({
"bJQueryUI" : true,
"sPaginationType" : "full_numbers",
"bRetrieve" : true,
"bFilter" : true,
"iDisplayLength": 10,
"bProcessing" : true,
"bServerSide" : false,
"aoColumns" : [ { "bSearchable" : false,"bVisible" : false,
"asSorting" : [ "asc" ] },
{"sWidth" : "20%","bSortable" : true },
{"sWidth" : "20%","bSortable" : true },
{"sWidth" : "20%","bSortable" : true },
{"sWidth" : "20%","bSortable" : true },
{"sWidth" : "20%","bSortable" : true }
]
});

jQuery(".ui-corner-br").addClass("ui-widget-header_custom");
});