Paginación usando la gema Kaminari

Por: Lukasz Muzyka, en: 2014-08-22

Este tutorial aparece en más de una ruta.

Cuando trabajamos con solo un par de registros, es mucho más fácil listarlos en la página de índice. Pero, ¿qué sucede cuando tenemos más de dos, digamos 100 registros? ¿Qué pasa si tenemos 1000? o ¿1 millón? Si tratamos de enumerar a la vez todos los registros de la base de datos en una página web, no sólo será un montón de carga en la base de datos, la descarga tomará mucho más tiempo, y probablemente el navegador del usuario se colgara.

Afortunadamente, hay una manera de cortar los datos en trozos más manejables y utilizar páginas separadas para mostrar los registros. Este proceso se llama paginación.

Para gestionar este proceso, utilizaremos una gema llamada  "kaminari."

Paso 1: Añade Kaminari y agrupa las gemas

En primer lugar, añade kaminari en el Gemfile

Gemfile

gem 'kaminari'
gem 'kaminari-bootstrap'

Como estamos usando bootstrap, hemos añadido kaminari-bootstrap, por lo que el selector de nuestra página está muy bien decorado.

bash

$ bundle install

Ahora podemos encomendar a nuestro controlador paginar nuestro listado en el índice. Dependiendo en que ruta estés trabajando con este tutorial, esto afectará los mensajes, las conexiones o los usuarios. El código por la mayor parte será idéntico. La única diferencia será el nombre de la variable.

Paso 2: Trabajando con las Publicaciones

Si estás trabajando con los mensajes, ve a posts_controller.rb y reemplaza la siguiente línea con el nuevo código:

app/controllers/posts_controller.rb

def index
  # @posts = Post.all we will replace this old code - you can delete this line

  @posts = Post.order('created_at DESC').page(params[:page]).per(15)
end

Paso 3: Trabajando con los usuarios

Si estás trabajando con los usuarios, ve a users_controller.rb y reemplaza la siguiente línea con el nuevo código:

app/controllers/users_controller.rb

def index
  # @users = User.all Nosotros reemplazaremos este código - puedes eliminar esta línea

  @users = User.page(params[:page]).per(30)
end

Paso 4: Trabajando con las relaciones

Si estás trabajando con las relaciones, regresa a users_controller.rb y agrega las siguientes líneas de código:

app/controllers/users_controller.rb

def index
  # @sent_invites = current_user.sent_invites PUEDES BORRAR ESTA LINEA
  # @received_invites = current_user.received_invites PUEDES BORRAR ESTA LINEA

  @sent_invites = current_user.sent_invites.page(params[:page])
  @received_invites = current_user.received_invites.page(params[:page])
end

Paso 5: Añade los botones de navegación

Ahora, podemos agregar los botones de navegación en el archivo de views:

Si estás trabajando con las publicaciones:

app/views/posts/index.html.erb<

<%= link_to 'New Post', new_post_path %>

<div>
    <%= paginate(@posts) %>
    <ul>
        <% @posts.each do |p| %>
        <li>
            <h3><%= link_to p.title, post_path(p.id) %></h3>
            <p><small><strong>By:</strong> <%= p.user.email %></small></p>
            <p><%= p.body %></p>
        </li>
        <% end %>
    </ul>
    <%= paginate(@posts) %>
</div>

Si estás trabajando con los usuarios:

app/views/users/index.html.erb

<div class="container">
    <div class="users row">
        <%= paginate(@users) %>
        <% @users.each do |user| %>
        <div class="panel panel-default">
            <%= link_to user_path(user) do %>
            <div class="panel-body">
                <%= image_tag(user.avatar.url(:medium)) %>
                <p><%= user.full_name %></p>
            </div>
            <% end %>
        </div>
        <% end %>
        <%= paginate(@users) %>
    </div>
</div>

Puedes ver lo fácil que es cuando se utiliza una herramienta como kaminari. Todo lo que se necesita es declarar y usar <%= paginate(@list_of_something) %> donde desees mostrar los enlaces de navegación. Si no tienes suficientes registros para exhibirlos, adelante y practica con la opción.per().Simplemente específica que tan grande o pequeño son los trozos de datos que quieres mostrar. El resultado final debe de verse así:

Comentarios

• en: 2015-08-24 nate escribió:

  Really learned a lot from these. Hope to see more. Thank you!

• en: 2015-08-24 nate escribió:

  Really learned a lot from these. Hope to see more. Thank you!

Comentar

Tú puedes Inicio de sesión Comentar