How to implement next/back function when using ajax call?

Question

I am working on a website which shows a list of transaction records(10 records per page).

The page has paging and searching function, which allows user to view specific transaction record.(like date range, types....more than 10 parameters at most)

When user clicks anything(changing page/search criteria), a ajax call is used to fetch and display the transactions without reloading.

However, say, a user click next page(ajax call) to view page2 and trying to click the browser back button. The site will redirect him to another webpage instead of going back to page1.

I know that there is a window.history.pushState to change url without reloading in html5 at chrome/Firefox. But I have to support older browsers like IE7+/FF/Chrome/Safari.

Are there any existing solution to solve this problem? Thanks.

---

Edit : I have tried the history.js this noon.

// newUrl: "?para1=value1&para2=value2&....

history.pushState({data:"searchTransaction"}, document.title, newUrl);

And the url has changed after the ajax request. And I have a problem is how to handle the change event. I want to bind the back/next(user click) event and get the "newUrl", then parse it back to a parameter map and do the ajax request again. And I want to store the whole parameter array when pushState if possible.

Answer 1

Unfortunatelly you can't catch the 'back/next' event because it doesn't exists, but you can catch the statechange

// Bind to StateChange Event
History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
    var State = History.getState(); // Note: We are using History.getState() instead of event.state
    History.log(State.data, State.title, State.url);
});

What I usually do is to catch the user's clicks, and if a statechange is trggered without a click I supose that the user does next or back.