Laravel 8 Datatables Keeping Selected Page Number

In this article, we will see laravel 8 datatables keeping selected page numbers after the callback. In the datatable page, the number is not saved when you reload the page. So, we need to keep or get the current page in datatable after the page reloads to save the state of datatable.

Enable or disable state saving. Datatables stores state information such as pagination position, display length, filtering, and sorting. When this initialization option is active and the end user reloads the page the table's state will be altered to match what they had previously set up.

So, we need these kinds of requirements like refresh datatable without refreshing page number in laravel 8, laravel 8 datatable refresh the current page, refresh the page without losing active pagination in datatable using jquery, how to refresh datatable without reloading the page in laravel 6/7/8.

So, let's see examples of datatables state save callback example and refresh datatable without refreshing page number in laravel 8.

Example 1:

In this example, just change the value of the statesave function to true or false.

$('#example').dataTable( {
  stateSave: true,
  stateDuration:-1
} );

Data storage for the state information in the browser is performed by use of the localStorage or sessionStorage HTML5 APIs.

The stateDuration: This option is also used to indicate to datatables if localStorage or sessionStorage should be used for storing the table's state. When set to -1 sessionStorage will be used, while for 0 or greater localStorage will be used.

 

 

Set state duration to 1 day:

$('#example').dataTable( {
  "stateSave": true,
  "stateDuration": 60 * 60 * 24
});

 

Example 2:

Enable state saving and override state save/load handlers to use only the table's DOM id.

$('#example').dataTable( {
  stateSave: true,
  stateSaveCallback: function(settings,data) {
      localStorage.setItem( 'DataTables_' + settings.sInstance, JSON.stringify(data) )
    },
  stateLoadCallback: function(settings) {
    return JSON.parse( localStorage.getItem( 'DataTables_' + settings.sInstance ) )
    }
} );

 

Example 3:

stay on the current page after re-drawing if you pass false as a first parameter to the draw() function.

table.row(index).data(data).draw(false)

 

 

Example 4:

If you are using server side datatable, then you can use ajax.reload() function to reload the datatable and pass the true or false as a parameter for refresh paging.

var table = $("#table").DataTable();
table.ajax.reload(null, false);

 


You might also like:

techsolutionstuff

Techsolutionstuff | The Complete Guide

I'm a software engineer and the founder of techsolutionstuff.com. Hailing from India, I craft articles, tutorials, tricks, and tips to aid developers. Explore Laravel, PHP, MySQL, jQuery, Bootstrap, Node.js, Vue.js, and AngularJS in our tech stack.

RECOMMENDED POSTS

FEATURE POSTS