Tuesday, November 22, 2011

AJAX pagination in rails 3

      We all use will_paginate gem for pagination in our application. However the pagination sends a HTTP request every time when you click on the next page. It will be very nice if the pagination sends an ajax request and update the corresponding <div>, well here it is and its very easy in rails 3... you just have to add few lines in views and controller.

1. In the controller

def index
    @devices = Devices.all.paginate(:page => params[:page] || 1, :per_page => 10)
    .....
    .....

    respond_to do |format|
      format.html
      format.js
    end
end

2. Create a file named index.js.erb in the views and place the following code.

$('#devices').html('<%=escape_javascript(render(:partial => "devices_list"))%>');
$('.pagination a').attr('data-remote', 'true');

3. Put the table which has pagination inside a partial, so that it can be called on each ajax request.

I wish to use pagination in one of my index page, So i will place my table inside a partial  _devices_list.html.erb

<table>
      <thead>
        <tr >
          <th>&nbsp;</th>
          <th colspan="2"><h4>Devices</h4></th>
          <th><%= will_paginate(@devices, :previous_label => "&larr; Previous", :next_label => "Next &rarr;", :inner_window => 1, :outer_window => 1 )%></th>
        </tr>
......
......
</table>

and place this partial inside a div

<div id="devices">
  <%= render :partial => 'devices_list' %>
</div>

4. Add a few lines of jquery inside the script tag in the index page

 <script type="text/javascript">
  $(function() {
    $('.pagination a').attr('data-remote', 'true');
  });
</script>

That's it... it's all done... now you can see an index page which has ajax pagination.If you wish to notify the user that something is happening with a spinner or any hourglass image when the user clicks on the pagination link add the following code.

Add a div which contains the image of the spinner in index file or application.html.erb(This can be used all over the application).

<div id="show_spinner_image" style="display: none">
  <%=image_tag('loader.gif', :border => "0", :style => "float:left;")%> 
</div>

In your application.css

#show_spinner_image{
  position: fixed;
  top: 50%;
  left: 55%;
  margin: -100px 0 0 -100px;
  text-indent: 250px;
  white-space: nowrap;
  overflow: hidden;
}

This CSS will display the spinner at the center of the screen.

Inside the script tag :

<script type="text/javascript">
  $(function() {
     $('.pagination a').click(function(){
         $('#show_spinner_image').show();
        $('.pagination a').attr('data-remote', 'true');
      });
  });
</script>
And at last, in your index.js.erb

$('#devices').html('<%=escape_javascript(render(:partial => "devices_list"))%>');
$('#show_spinner_image').hide();
$('.pagination a').click(function(){
$('#show_spinner_image').show();
$('.pagination a').attr('data-remote', 'true');
     });


Enjoy......

9 comments:

  1. I was actually looking for this resource a few weeks back. Thanks for sharing with us your wisdom.This will absolutely going to help me in my projects .
    Once again great post. You seem to have a good understanding of these themes.When I entering your blog,I felt this . Come on and keep writting your blog will be more attractive. To Your Success!
    Classic Dresses
    Classic Bridesmaid Dresses
    Trumpet Wedding Dresses
    New Style Flower Girl Dresses
    Wedding Dresses with Sleeves

    ReplyDelete
  2. To see Buy WOW Gold and RS Gold world and in a granda of stand.And a heaven in a wild flower.Hold infinity in the palm your hand and eternity in an hour.

    ReplyDelete
  3. I love you so much... I have been trying for two hours !

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. yep It Worked...
    Good Work Dude........

    Thanks

    ReplyDelete
  6. I found so many interesting stuff in your blog especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here! keep up the good work... amethyst ring

    ReplyDelete
  7. I really loved reading your blog. It was very well authored and easy to undertand. Unlike additional blogs I have read which are really not tht good. I also found your posts very interesting. In fact after reading, I had to go show it to my friend and he ejoyed it as well! garnet engagement ring

    ReplyDelete