DataTable keep state after refresh - javascript

I have a table which reloads its data at a period of time and it should keep the state after each reload. I've tried using "stateSave": true but without success.
Is there a way to keep the state (search, paging) after each data reload? Is clear the one that makes the table loose its state?
Here is my code - JsFiddle
I don't have much experience with DataTables so, please, be gentle.

State is being saved, but some of it is being overwritten by the code in your reload loop.
State which is being saved and preserved:
Sorting (clicking on column headings)
Filtering (using the gloabl filter input control).
Records per page ("show x entries")
Steps: (1) I open my copy of your web page, and change these items. (2) I close the web page. (3) I re-open the page. The above items are preserved.
State which is being overwritten by your code:
Paging (moving from page 1 to page 2)
If I do this, then when I close and return to the page, my pagination selection is no longer on page 2.
But the pagination selection was actually saved.
It's just that your code immediately overwrites the saved value, when the page is re-opened, before the first table draw:
else table.clear().rows.add(data).draw();
So, you never get to see the previously saved pagination applied by the user.
When the table is cleared and the data is reloaded, that is basically applying a new pagination, overwriting your saved one.
State saving works by saving data to your browser's local storage. It is there where the page change (page 1 to page 2) is stored.
You can see this for yourself by opening your browser tools (F12), and locating the Local Storage entry for your table.
When you move to page 2, you see this:
This means: start with the 10th record and show 10 records per page
(note that the 10th record is actually the 11th since the index is zero-based).
If you watch this start value in your browser, you will see it being reset back to zero when your refresh code runs.

Related

How to automatically refresh an interactive grid after clicking on save button or at a fixed interval?

I have an page item and an interactive grid on an apex page . Page item is of select list type and base on the selection the data in the grid changes. I have default Add row button in the grid to add rows . I want to refresh the grid after after click on the SAVE button in the grid. If the grid automatically refresh itself after a fixed interval of let's say 2 or 5 second that is also good for me.
For the current scenario the rows are getting added but are not reflecting on page in the interactive grid after clicking on SAVE but entries can be found in the table in the database. After reloading the page the entries are reflecting in the grid.
NOTE : I am working over a database link for fetching the data.
There is a way to hook upon the built-in save action of the interactive grid.
Steps below will create a custom event, listening to the interactivegridsave event. That event is fired by APEX after the Interactive Grid has completed its own save process. Make sure the event name is spelled correctly.
Create Dynamic Action
When → Custom
Custom Event → interactivegridsave
Selection Type → Region
Region → <your region>
Refresh action (maybe turn off Fire on Initialization)
I think this will help you.
When you add rows to your Interactive Grid and hit save button, it refreshes and you can see the IG updated.
In case you need to refresh the region or the page every 5/10 seconds, please follow these steps:
Define a Static ID for the IG, for example "IG1".
In the page attributes, navigate to Execute when Page Loads and enter:
var model = apex.region("IG1").widget().interactiveGrid("getViews").grid.model;
setInterval(function(){ model.fetchRecords(model._data); }, 10000);
This is going to refresh the IG every 10 seconds. You can set it to 2 or 5 seconds.
I had something similair with filters, If I added a row that shouldnt show up due to the filter I had on it would still be there until I refreshed. Of maybe if I changed something so it should no longer show up, it saved, but still showed up.
What I did was do a page submit after saving.
I have a Dynamic Action on Click Selection type jQuery Selector and the selector being [data-action="save"]
Then the action is simply Submit page.
This way after you click save, it submits the whole page and reloads.
Hope this does what you need.

Data Tables State Reset Using Localstorage

I'm having problems using Data Table's (v1.10.6) save feature.
Using the below parameters, it seems that saving and restoring state functionality works correctly, but after a random amount of time, the state gets overwritten with the default table layout. This problem seems to only occur after making table changes at night, then checking the site in the morning to find everything reset. Data Tables usually persists the table layout throughout the day, but there are fringe occurrences where table layout gets reset randomly during the day. Data Tables is the only location local storage is being set.
Ideal behavior is that the state of Data Tables, reordering or adding columns, stays indefinitely persistent as a user changes the table.
stateSave: true,
stateDuration : 0,
stateSaveCallback: function(settings, data) {
localStorage.setItem('DataTables_Asset_List', JSON.stringify(data));
},
stateLoadCallback: function(settings) {
return JSON.parse(localStorage.getItem('DataTables_Asset_List'));
}
Plugins used:
Data Tables Bootstrap
ColReorder
Any assistance is appreciated, thanks!
What you're looking for is the stateDuration option:
https://datatables.net/reference/option/stateDuration
If your tables are saving to localStorage, this option defines how long the saved state in localStorage is used, before returning back to the default state. The default value of stateDuration is 7200 (or 2 hours).
For example, if a user goes 2 hours without visiting the page/reloading the table, which simply "refreshes" the countdown timer if you will, then the table will load its default settings. Regardless of what is currently in the localStorage. This explains why changes seem to not persist overnight.
In summary, increase the stateDuration option to increase the persistence duration of your tables.
I hope that helps.

Apex - Clear form when leaving page (also on redirect)

Currently, if I populate a form and leave the page, the form entries will still be present when I return to the form. Is it possible to prevent these entries from being saved?
The items' default values are populated using PS/SQL, but the content can be adjusted.
I tried creating a dynamic action to clear the items on 'Page Unload', but this didn't do anything. Is this the correct browser event, or did I simply get the implementation wrong?
Update: To provide a bit of context...
Pages:
Home
Form
DML Form (insert) - I want any modifications to not be stored
Page 3 can be accessed via Page 1 or Page 2.
If the user accesses the form via Page 2 (a different form), they will have selected a specific value and this is used to populate default values on Page 3 (via item and PL/SQL Function Body).
If the user accesses the form via Page 1, the same PL/SQL will run - this may result in Page 3 form items being empty (NULL default values).
HOWEVER, when the user edits Page 3 items (changing from default values), these values will persist when the user next accesses the form. How can I prevent this state from being captured?
You will need to clear the cache of the page. This will clear the session state of the items on the page and thus result in items being empty once again.
You may need to add this clear on several locations. If you have used column links to access the page, buttons with redirects, branches, etc. The apex URL has a part which states which pages have to be cleared, and you can generally define this clearing of a page cache declaratively.
You can also create processes where you can define which page (or pages) has to be cleared. For example, if you always want the cache to be cleared when entering the page, no matter where you came from, you could add a process on the page doing just that.
Session state is ultimately what is causing this behavior: go to the page, change some things, page gets submitted for whatever reason and causes session state to be saved.
Usually, on DML forms generated through the wizard, the cache would only be cleared when using the "create" button coming from another location (usually the overlying report).
Here is the (apex 5.0) documentation on session state and managing it.
You can do it with something like this, but first you need to add jQuery to your page. I recommend using a content delivery network (CDN). You can edit the code to clear the value in your type of forms. I hope this could help you!
jQuery CDN example
$(document).ready(function() {
$("body")
.find("input").val("")
.end()
.find("select").val("-")
.end()
.find("textarea").val("");
};
});

How to handle pagination in Single Page Application?

On my Single Page Application (Javascript (AngularJs) webapp), I'm displaying a paginated items list.
I'm displaying 10 items per page.
In order to retain the current pagination opened by the user at any time while this one navigates on other page, I put the current page number on browser's localStorage.
Here's an example of workflow:
The user goes to myItemsList.html.
He opens the page 2 involving the url: myItemsList.html?page=2.
Then, he goes to another page: myOtherPage.html.
He goes back to the link initially pointing to myItemsList.html, that displays directly thanks to localStorage the page myItemsList.html?page=2 in order to potentially continue his navigation.
Would it confuse the user, maybe expecting to see the page 1 as a new starting navigation.
If I display at the top of the list, a kind of label like "Page 2" in order to warn him that he's seeing the preceding portion of his navigation, isn't it UX-friendly?
Or should I completely avoid persisting current pagination?
Here's what could happen if I don't persist the current viewed page:
The user goes to myItemsList.html.
He opens the page 2 involving the url: myItemsList.html?page=2
He opens an item in this page (the "show" page), leading to: myItemsList.html?id=123
He clicks on the browser's back button, causing a refresh of myItemsList.html (since a Single Page Application). The current pagination (page 2) would be lost and the user would need to restart it in order to continue its items discovery.
This seems really touchy...
What strategy should I choose for a use case like this?
saving the progress through navigation is the expected behavior in UX design of SPA, so maintaining the page he was in the correct choice, and since it is a pagination it won't be an issue even if the user wants to go back to any page, it will only take a click.
First of all I would avoid using localstorage and use a service instead to persist ur page counter.
Secondly u dont need to persist pg counter to anywhere else but in a scope variable for refreshing to mext page data. You can even think about just adding to results similar to infinitite scroll use cases. But either way, u can use local scope variable for pagination.
Whether to go directly to last viewed page - is a more business decision and will depend on needs.
But u can very easily persist or remove persisted data using broadcast and watch and decide on persistence based on event listened to.
Hope thos helps ...
How about maitaining a sort of heirerachy in JS like this :
Suppose a user navigates to a section called Customer Search
customer_search.customer_display.page = 2
Where customer_search is the a subsection , customer_display is the view with pagination you are targetting .
menu.menu_items.page=7
Where menu is the subsection , menu_items is the view with pagination
Might work if your application is organized in a reasonably hierarchical manner .
Probably you could also maintain the page in $scope for that particular controller .
The URL should dictate the navigation.
When I navigate to your website, e.g. example.com, I expect to be on the first page.
When I navigate to a (bookmarked) page of your website, e.g. example.com?page=2, I expect to be on the second page.
When I hit the back button, I expect to be presented with the previous page exactly as it was when I left it. You don't need to refresh the entire page, just listen to the history events and update accordingly.
And I strongly believe that this question doesn't belong to stackoverflow...

Javascript based Tabs - on page reload data is lost

I am using a Tab based layout, which has 5 Steps with different input fields for each step.
and if user on step 4 page reloads then start the complete process from step1 agaig. Is there any possibility to remain on step 4 after reploading the page
Use localStorage to store your information collected so far. If a reload happens, first check, whether any data has already been entered and if so fill in the appropriate elements and redirect the user to the first "unfinished" tab.
localStorage Docu # MDN

Categories

Resources