Ajax pagination of a data table with Rails

Create a controller and an action list to display first the paginated list and a protected method for the pagination:

class MyController < ApplicationController
def action list
page=1
per_page=12
page_count = -1
paginate_users(page, per_page, page_count)
end

protected

def paginate_users(page, per_page, count)
if (count < 0)
@users_count = User.count(:all, :conditions => ['created_on > ?', Time.now - (30 * 24 * 60 * 60) ])
else
@users_count = count
end
@user_pages = Paginator.new(self, @users_count, per_page, page)
@users = User.find(:all, :conditions => ['created_on > ?', Time.now - (30 * 24 * 60 * 60) ], :order => 'created_on DESC', :offset => @user_pages.current.to_sql[1], :limit => per_page)
end
end

The corresponding view (list.rhtml) would display the scrollable data grid as is :

<div style="width:820px;height:20px;background-color:#C1DDF3; border-color:#C1DDF3;color: #626262;border:1px solid;">
<table id="dg_header" border="0" cellspacing="0" cellpadding="0" style="width:100%">
<tr>
<td style="width:273px">First Name</td>
<td style="width:273px">Last Name</td>
<td style="width:273px">Email</td>
</tr>
</table>
</div>
<div style="overflow:auto;height:100px;width:837px">
<table id="dg_body" border="0" cellspacing="0" style="background-color:#ddd;width:822px;border-collapse:collapse">
<%= render :partial => 'row', :collection => @users %>
</table>
</div>

The _row.rhtml partial would be :
<tr id="row_<%=user.id.to_i%>" class='tableRow' >
<td style='width:273px'><%= user.firstname %></td>
<td style='width:273px'><%= user.lastname %></td>
<td style='width:273px'><%= user.email %></td>
</tr>

Now, in the list.rhtml file, insert the navigation bar as a footer of the data grid :

<div style="width:820px;height:20px;background-color:#C1DDF3; border-color:#C1DDF3;color: #626262;border:1px solid;">
<table id="dg_footer" border="0" cellspacing="0" style="WIDTH:100%">
<tr id="row_nav_links">
<%= render :partial => 'nav_links' %>
</tr>
</table>
</div>

The _nav_links.rhtml partial would be :

<td width="100%" align="center">
Pages <%= @user_pages.current.first_item %>
- <%= @user_pages.current.last_item %>
de <%= @user_pages.item_count %>
<%= if @user_pages.current.previous
link_to_remote("Previous page", :url => { :action=> 'next_prev_users', :page => @user_pages.current.previous, :count=> @user_pages.item_count} )
end
%>

<%= if @user_pages.current.next
link_to_remote("Next page", :url => { :action=> 'next_prev_users', :page => @user_pages.current.next, :count=> @user_pages.item_count } )
end
%>
</td>

Finally, add the action next_prev_users to your controller :

def next_prev_users
page=params[:page].to_i
page_count = params[:count].to_i
per_page=12

paginate_users(page, per_page, page_count)


render :update do |page|
# Repaint the data grid
page.replace_html "dg_body", :partial => 'row', :collection => @users
# Repaint the Navigation bar
page.replace_html "row_nav_links", :partial => 'nav_links'
page.visual_effect :appear, "dg_body"
end
end