rails - Cómo implementar la paginación ajax con la gema will_paginate

rails will_paginate per page

Question

Estoy usando la gema will_paginate en mi proyecto ROR para mostrar los registros en las páginas.

Quiero que la siguiente página se cargue sin volver a cargar toda la página con ajax .

Encontré algunos ejemplos en la red, pero no funcionan para mí.

¿Como hacer esto?

Answer 1

Adicional a la respuesta anterior.

cadena de código:

$(".sort_paginate_ajax th a, .sort_paginate_ajax .pagination a").on("click", function(){

reemplazar con una cuerda:

$(".sort_paginate_ajax").on("click", ".pagination a", function(){

El evento onclick se aplica solo a los elementos que ya existen. Por lo tanto, para que aparezcan nuevos enlaces, es necesario delegar el evento de clic desde el elemento primario ".sort_paginate_ajax" to childs ".pagination a".

Answer 2

Cree un nuevo ayudante (ej. App / helpers / will_paginate_helper.rb) con el siguiente contenido:

module WillPaginateHelper
  class WillPaginateJSLinkRenderer < WillPaginate::ActionView::LinkRenderer
    def prepare(collection, options, template)
      options[:params] ||= {}
      options[:params][''_''] = nil
      super(collection, options, template)
    end

    protected
    def link(text, target, attributes = {})
      if target.is_a? Fixnum
        attributes[:rel] = rel_value(target)
        target = url(target)
      end

      @template.link_to(target, attributes.merge(remote: true)) do
        text.to_s.html_safe
      end
    end
  end

  def js_will_paginate(collection, options = {})
    will_paginate(collection, options.merge(:renderer => WillPaginateHelper::WillPaginateJSLinkRenderer))
  end
end

Luego, en su vista, use esta etiqueta para la paginación ajax:

<%= js_will_paginate @recipes %>

Recuerde que los enlaces de paginación incluirán los parámetros existentes de la URL, puede excluirlos como se muestra a continuación. Esta es la funcionalidad estándar de paginación:

<%= js_will_paginate @recipes, :params => { :my_excluded_param => nil } %>

Espero que resuelva tu problema.

Actualización 1 : se agregó una explicación de cómo funciona esto en la pregunta original donde publiqué esta solución.

Actualización 2 : Lo he hecho compatible con Rails 4 con control remoto: enlaces verdaderos y he cambiado el nombre del método auxiliar a js_will_paginate .

Answer 3

Oye, si quieres paginar productos, prueba esto:

app / controllers / products_controller.rb

def index
  @products = Product.paginate(page: params[:page], per_page: 10)
end

views / products / index.html.erb

<div class = "sort_paginate_ajax"><%= render ''products'' %></div>

views / products / _products.html.erb

<% @products.each do |product| %>
# your code
<% end %>
<%= will_paginate @products %>

vistas / productos / index.js.erb

$(''.sort_paginate_ajax'').html("<%= escape_javascript(render("products"))%>")

activos / javascripts / application.js

$(function() {
  $(".sort_paginate_ajax th a, .sort_paginate_ajax .pagination a").on("click", function(){
    $.getScript(this.href);
    return false;
  });
});

Entonces, primero estamos llamando al método de paginación en el Producto para todos los productos, aquí se establecerá una compensación de acuerdo con los params[:page] y el límite se establecerá mediante per_page opciones per_page . También estamos mostrando products parciales que se representarán cada vez que se abra otra página.

En la llamada parcial en @products que desea, y luego el método will_paginate se aplica en @products , también crea params[:page] que se usan en el controlador.

Ahora, en respuesta a la solicitud de ajax, represente el contenido de div con la clase sort_paginate_ajax con el parcial que creamos.

También para realizar una solicitud ajax, en el script de captura de carga de documentos de todas las etiquetas en div.sort_paginate_ajax , y devuelva false.

Ahora las páginas serán llamadas con petición ajax.

Espero que esto te ayude.

Answer 4

Para continuar con la excelente respuesta de @ Pierre al crear un ayudante, he visto algunas preguntas de seguimiento con respecto a la actualización de las vistas (un problema que inicialmente tuve). @Pierre da seguimiento a ese problema indicando que necesita crear una respuesta js. Esto es lo que hice después de crear el ayudante:

en mi show.html.erb

<div id="see-comments">
    <%= render @comments %>
</div>
<div id="pagination-comments">
    <%= js_will_paginate @comments %>
</div>

Creé otro archivo llamado show.js.erb (así que dos formatos para mostrar)

// to update comments    
$("#see-comments").html("<%= j render @comments %>");
// to update the pagination links
$("#pagination-comments").html(''<%= js_will_paginate @comments %>'');

Answer 5

Usted podría simplemente usar JQuery:

Controlador:

def index
  @posts = Post.paginate(:page => params[:page])      

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

Luego en index.html.erb:

<div id="post-content", posts: @posts >
  <%= j render ''post_content'' %>
</div>

En parcial ''_post_content.html.erb'':

<%= will_paginate @posts %>
<% @posts.each do |post| %>
  <p><%= post.content %></p>
<% end %>

pagination.js:

$(document).ready(function() {
  $(''.pagination > a'').attr(''data-remote'', ''true'');
});

index.js.erb:

$(''#post-content'').html("<%= j render ''post_content'' %>")

Asegúrese de agregar el

$(''.pagination > a'').attr(''data-remote'', ''true'');

de nuevo en su plantilla JS (index.js.erb), por lo que establece los enlaces de datos remotos nuevamente cuando se ejecuta el Ajax.