Ajax Pagination on Rails and Kaminari28 Jan 2016
One of the most common tasks that our team always need to do is to perform pagination on a list of products or items. Usual pagination with Kaminari gem and page reload is good but with a bit addition on Ajax would make the application snappier and more user friendly.
In this post, I would like to introduce the way that I usually perform to convert a normal pagination to Ajax Pagination.
1. Create a new Rails app
First, let’s create a new Rails app
2. Generate Book model and populate some demo data
First, let add Kaminari and Paperclip gem into our Gemfile
Then generate Book Model and add cover as a paperclip attachment
And run database migration
Add paperclip code inside
Populate some seeds data in
seeds.rb, which you can copy the seeds file from here http://bit.ly/1TsNZiT
Finally, run the seed file to populate data
3. Create controller and index view
Let’s generate books controller with index action:
books_controller.rb and add index action code:
Add a bit of style inside
application.css - which you can copy from here http://bit.ly/1KLNpWg
Now, if you visit http://localhost:3000/books/index, the normal pagination should work perfectly okay. Now we are going forwards to ajaxifying the pagination.
4. Convert the current pagination into Ajax Pagination
What we have done in the above js code is to turn on the delegation from document body to each pagination link so that when a user clicks on a link, it will stop all the default page load and instead now display a loading message and try to load the HREF of the a tag using Ajax load instead. This way, the content would now be served via Ajax instead of usual entire page reloading.
One more thing that we would have to change on our index action is that we would have to detect the ajax load and serve the content of the action without the layout so that only the needed HTML is returned:
Up to this point, our Ajax pagination has been successfully implemented. However, there is one small glitch that we would tend to over look, which is the URL of the page when user clicks over a page. Currently, it would remain the same.
For instance, if you are on page 1, your URL would be
http://localhost:3000/books/index?page=1. Now, if a user clicks on page 2, because of the Ajax nature, the content would be changed to content of page 2, but the URL would still be
http://localhost:3000/books/index?page=1. In order to fix that, we would need to change the earlier js by adding the history of the page
And that’s it. Here is the final demo
We have gone through how to make an ajax pagination using standard pagination gem like Kaminari. It would be beneficial if you could extend the current implementation to cater for search and filter. I hope you find this article useful and please input your comments if you have any suggestions to make this even better :-).
Last but not least, the source code of this article is made available on this github URL - https://github.com/jameshuynh/blog-codes/tree/master/ajax-pagination-demo
6. There are 4 Learning Points in this article
1. Paperclip photo can be extracted from a URL by passing a URI object into the paperclip attribute
2. You can check if a request is an ajax request by using the code
This will cause the URL bar to display
http://current-domain-name.com/new-url, but won’t cause the browser to load
/new-url or even check that
4. Hooking an event into pop state event
When user clicks on Back / Forward button on the browser, you can bind a havascript function as its callback. This would help our application load approriate URL