en Proyectos

Bazar: Implementando listados continuos en 15 minutos

Para los que ya estéis usando Bazar habréis notado que hay algunas cosas de las que estamos muy orgullosos y nos gustaría describiros más en detalle.

Se trata del concepto de listados continuos. Cuando abordas como mostrar muchos registros en un proyecto web hay una solución comúnmente aceptada que es la paginación por un número de registros e incluir botones a cada una de las páginas, siguiente y anterior. Como solución es muy práctica y resuelve perfectamente el problema de mostrar mucha información.

Sin embargo nos parece mucho más natural e integrado los listados continuos. Un listado continuo muestra la primera información, pongamos 30 registros y cuando detecta que haciendo scroll en la página añade automáticamente los siguiente registros.

El usuario no tiene que desplazar el ratón para seleccionar la siguiente página si no que se convierte en algo tan natural como simplemente navegar.

Una vez más Ruby on Rails lo hace simple y elegante. Os contamos como se hace:

A) Primero hay que usar el plugin jquery.pageless

Este plugin se puede bajar desde github.

B) Como funciona:

En el controlador:

def show

    @consulta = Empresasconsulta.find_by_empresa_id_and_id(current_user.id, params[:id])
    @empresasresultados = Empresasresultado.where('empresasconsulta_id = ?', params[:id]).order('orden desc').paginate(:page => params[:page], :per_page => 30)

    if request.xhr?
      render(:partial => "empresasresultado", :collection => @empresasresultados)
    end
end

Como se puede ver usamos el paginate tradicional para obtener todas las empresas de una búsqueda de 30 en 30 items.

La magia de Ruby on Rails viene con en que solo vamos a tratar las peticiones ajax y hacer un partial con la página que queremos pintar o añadir al listado.

En la vista:

En la vista el plugin jquery.pageless hace todo el trabajo «sucio»:



          "empresasresultado", :collection => @empresasresultados) %>

Aquí hay más elegancia aún, tenemos un render partial para pintar cada uno de los resultados de la siguiente página.

El resultado es que implementar listados continuos te lleva 15 minutos por vista y un código del que puedes estar muy orgulloso.