Restore table state on demand

xtech_dev

Hello,

Is there a way to restore table state on demand?

colin

Hi @xtech_dev ,

If you use stateSave, this will return the table to it's previous state.

Cheers,

Colin

xtech_dev

but i have other scenario:
- page loaded
- table is loaded with data (state is restored)
- data edit (post to server)
- table reload with current data form server
- and here i would like to have state restore (without table reinitialization and without page refresh)
-

colin

Hi @xtech_dev ,

Yep, that fourth point, the table reload, that would just require an ajax.reload() - the table retains it's state, it just gets a data refresh.

Cheers,

Colin

xtech_dev

i'm not using build in ajax data loading. i have custom loader - will it work when i call ajax.reload() when data source parameters are not specified?

kthorngren

ajax.reload() uses the ajax config. Since you don't have that it won't do anything for you.

Maybe for point number 4 you could use the following:
- page() to get the current page
- clear() to clear the table data
- rows.add() to add the current data
- draw() to redraw the table
- page() to jump to the saved page in step 1

Kevin

xtech_dev

Thanks very much your help!

My solution goes like this:

1. At the moment of opening edit form i'm clonning table state: var appContext = { tableState: $.extend({}, table.api.state()) }

2. As soon as form is successfully submitted i'm restoring page with this extension method:

   $.fn.dataTable.Api.register('restorePage()', function (stateObject) {
       page = (stateObject.start / stateObject.length);
   
       // navigate to page
       if (this.page() != page) {
           this.page(page).draw('page');
       }
   
       return this;
   });
   

so on demand i use:
mytablereference.restorePage(appContext.tableState)

Actually having state object saved i can restore even more settings like sorting and filters.

It Man