javascript - Jquery DataTable Dynamic Pagination - Stack Overflow

admin管理员组

文章数量:1024905

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

Share Improve this question Follow asked May 9, 2015 at 5:11 Talha HabibTalha Habib 4311 gold badge11 silver badge88 bronze badges 1

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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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");
});

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

Share Improve this question Follow asked May 9, 2015 at 5:11 Talha HabibTalha Habib 4311 gold badge11 silver badge88 bronze badges 1

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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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");
});

本文标签： javascriptJquery DataTable Dynamic PaginationStack Overflow