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 ...

• CRUD operations using Bootstrap Modal in Asp.Net MVC
• Asynchronous Requests for CRUD operations in Asp.Net MVC
• Code First Migrations in MVC 5
• Jquery DataTable in MVC
• Jquery DataTable multisearch paging and Sorting in MVC server side
• Jquery DataTable paging, Sorting and Multi search with datepicker in MVC server side
• Cascading DropDowns in Asp.Net MVC
• AngularJS with Web Api in Asp.net MVC using Token based Authentication
• Ajax helper Based Search in MVC
• Customizing Authorize attribute or Role based Authentication or Authorization in MVC
• Display message when user is not authorized in mvc
• How to use AutoMapper

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 );