ngTable URL state saving
Posted on 2015-03-25
A popular and useful AngularJS plugin, ngTable, doesn’t save its state anywhere by default. Here’s how to fix it.
So you build a neat table with lots of data and paging and sorting and grouping and whatnot. But then, after playing with it and leaving the page, you hit the back button and you’ve lost your place! You’re back on the first page with default sorting and grouping.
So you want to put it in the URL, obviously. So when you change the state, the URL changes and the back button works (and bookmarks as well!).
Quick and easy solution :
We use angular.extend
to pass defaults OR load data from the URL with $location.search()
. In the getData
function, we make sure we don’t change the URL on the first page
load. But if we change the sorting or grouping or page or page count, the page’s URL will change to something like
?page=1&count=25&sorting%5BName%5D=asc
Now if you click another link and leave the page, when you hit back, the URL will contain this information and the angular.extend
will take these values and pass them on to getData
.
Unfortunately, this triggers a full routing reload. Which means the entire controller is called. It’s probably not the end of the world, but it’s kind of annoying since it flashes content and could call more AJAX than needed.
So we extend the $location
object with a new method:
Now, we can simply call $location.searchReplace(params.url())
in our getData
function and the controller will not be reloaded. Back and forward will still reload the full page, but I
haven’t gotten around to optimising that yet.
UPDATE: As requested by a commenter (Bob Clingan), here is the code in standard JavaScript syntax.
Extension code:
comments powered by Disqus