Ajax pagination in Ruby on Rails

Ruby on Rails, 2015-06-17 00:04:29 UTC

Before We begin creating an ajax pagination, We need to know the concept of ajax and pagination.

In my opinion, the main concept of ajax technique is requesting data in the background and catch the response. In this concept, after the browser receiving the data from the server, the response will replace an element.

And pagination concept is sending page variable to the server and the server give a specific response according to the request.

Let implement the concept;

1. Create javascript object.

You can create this javascript in "app_root/assets/javascript/application.js". Add these lines;

var library = {
    ajaxPage: function(page,element) {
        $.ajax({
            url: '/ajax/products?page='+page+'&rows=10+&of=created_at&od=desc',
            success: function(response) {
                $('#'+element).html(response);
            }
        });
    }
};


As you can see above, We need to pass a couple of parameters. For short, the most important variable is page and the others are;
rows =  number of the item to show on the page
of = order field
od = order direction


2. Route

Add these lines to your route;

root  "landing#index"
get '/ajax/products', to: "ajax_controller#products"




3. Controller

def products
    @page = params[:page]
    @rows = params[:rows] #num item to show
    @of = params[:of] #order field
    @od = params[:od] #order direction

    #offset
    @startx = (@page.to_i - 1) * @rows.to_i

    #all of item
    @total_item = Product.all.size

    #total_page
    @total_page = (@total_item.to_f/@rows.to_i).ceil

    @products = Product.order(@of+" "+@od).limit(@rows).offset(@startx)

    render partial: "products"
end




4. View

Here you must have a main view and ajax view

Main view; "root_app/app/views/landing/index.html.erb"

<h1>This is landing page</h1>

<section id="ajax_page"></section>

<script>
//for the first time page load, we need to call page 1
library.ajaxPage(1,'ajax_page');
</script>



Ajax page; "root_app/app/views/ajax/_products.html.erb"

<!-- just activated this if you want to see the value
page = <%= @page %><br />
rows = <%= @rows %><br />
of = <%= @of %><br />
od = <%= @od %><br />
total_item = <%= @total_item %><br />
total_page = <%= @total_page %><br />
next_page = <%= @page.to_i+1 %><br />
prev_page = <%= @page.to_i-1 %><br />
-->
<h1>Products</h1> 

<% @products.each do |p| %>
    <div>
        <%= p.title %> 
    </div>
<% end %>


<div>
    <!-- if (page - 1) = 0, don't show this --> 
    <% if ((@page.to_i - 1) != 0) %>
    <button onclick="library.ajaxPage(<%= @page.to_i - 1 %>,'ajax_page');">
        <span>&laquo;</span>
    </button>
    <% end %>
 
    <!-- don't show this if it just one page -->
    <% if @total_page.to_i > 1 %>
    <div>
        <button>
           Page <%= @page %><span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <% @ai = 1 %>
            <% while @ai <= @total_page do %>
            <li>
                 <a href="#ajax_page" onclick="library.ajaxPage(<%= @ai %>,'ajax_page');">Page <%= @ai %></a>
            </li>
            <% @ai += 1 %>
            <% end %>
        </ul>
    </div>
    <% end %>

    <% if ((@page.to_i + 1) < (@total_page + 1)) %>
    <button onclick="library.ajaxPage(<%= @page.to_i + 1 %>,'ajax_page');">
       <span>&raquo;</span>
    </button>
    <% end %>
</div>



Actually, this example uses Twitter Bootstrap, here is the screenshot;



Share: