Develop Reference

DataTable keep state after refresh

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.

How to remove a value from localStorage after reboot?

1) Enter text in the search
2) it is saved in localStorage
3) press "search", and the page is reloaded,
4) the text entered there in the search bar.
It is working correctly.
But if I start to click on other pages of the website, the search bar is still populated with a value from localStorage.
How can it be removed at the next reboot?
What should I use (not localStorage)?

In your comment you've clarified you want to do:
enter data
press "Enter"
reload page
data entered in the search bar
the next reloading of the data should be deleted
It sounds to me, then, like you don't want to use localStorage or sessionStorage at all. Instead, when sending the data to the server at #2 above (I'm assuming that's what pressing Enter does), return the search bar data when the page reloads at #3 above; use that to populate the search bar. Subsequent refreshes of the page won't have that data (because you won't have sent it, so you won't have echoed it back).
A less reliable solution would be to save the data in web storage (either localStorage or sessionStorage) at #2 above, then on page load see if the data is there, use it if so, and delete it. Then it won't be there on subsequent page loads. I say that's less reliable because if for some reason your page doesn't reload at #3, or while the data is being sent the user opens another page on your site with this search bar thing, they could see search data. That's why including it in the response to the search makes sense.

Back button when pagination is used in table?

In my angular js application i am using pagination in user list page,through which i am getting ten users at a time from server,and clicking on second page another ten users and so on.Details of a users are listed in a table.Now when click on some user,profile of a selected user is open in another page. Now when i come back from user profile to user list my table is again start from current page one.
That's the issue i want when i come back from user profile , user list must be open from the page where i was.

There are some way that you can fix it.
I recommend you two way.
First:
Change hash in your url when your table page changed and detect hash when you come back to your page.
like this url
http://youraddress.com/subdirs#page=2
You can find how change and detect hash in this link: https://docs.angularjs.org/guide/$location
Second:
Open user page in ajax div with $http in angularJS.
https://docs.angularjs.org/api/ng/service/$http

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