Saturday, August 5, 2017

How to Reload jquery datatable ajax

In this post I will show how to reload Jquery DataTable for every 20 Seconds with Paging Reset, Paging Retained and update an external elements when reloaded.

Previously I had shown how to ...

Reload table data every 20 seconds (paging reset):
  

var table = $('#tblEmployees').DataTable( {
    "ordering": true,
 "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
 "pagingType": "full_numbers",
 "scrollY": "300px",
 "scrollX": true,
 
 "processing": true,
 "serverSide": true,
 "orderMulti": false,

 "ajax": {
  "url": "/Home/getEmployee",
  "type": "POST",
  "datatype": "json"
 },
});
 
setInterval( function () {
    table.ajax.reload();
}, 20000 );

Reload table data every 20 seconds (paging retained):
  

var table = $('#tblEmployees').DataTable( {
    "ordering": true,
 "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
 "pagingType": "full_numbers",
 "scrollY": "300px",
 "scrollX": true,
 
 "processing": true,
 "serverSide": true,
 "orderMulti": false,

 "ajax": {
  "url": "/Home/getEmployee",
  "type": "POST",
  "datatype": "json"
 },
});
 
setInterval( function () {
    table.ajax.reload( null, false ); // user paging is not reset on reload
}, 20000 );

Reload table data every 20 seconds to update an external element:
  

var table = $('#tblEmployees').DataTable( {
    "ordering": true,
 "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
 "pagingType": "full_numbers",
 "scrollY": "300px",
 "scrollX": true,
 
 "processing": true,
 "serverSide": true,
 "orderMulti": false,

 "ajax": {
  "url": "/Home/getEmployee",
  "type": "POST",
  "datatype": "json"
 },
});
 
setInterval( function () {
    table.ajax.reload( function ( json ) {
    $('#myInput').val( json.lastInput );
});
}, 20000 );

No comments:

Post a Comment