will_paginate ajax pagination

Ajax pagination
This is the most popular feature request for will_paginate library. Reasons why the core library doesn’t support this are:

pagination is a concept decoupled from HTTP requests and rendering;

Ajax pagination is done differently across web frameworks;

Ajax is done differently across JavaScript libraries (not everyone uses Prototype);

The JavaScript side of the Ajax pagination concept is not trivial at all.

So the short reason why you can’t get Ajax pagination out-of-the-box with this library is that this kind of functionality belongs to user code.
Here are some examples to get you on the right track.
Warning:
don’t use the “RemoteLinkRenderer” or similar solutions you might find on blogs using Rails’ link_to_remote helper. Such solutions are obtrusive and will usually make your app broken for web spiders and difficult to debug.
Basic unobtrusive Ajax pagination for Rails
Let’s suppose you have a search box and you want to paginate search results. The following code assumes that:

the partial that renders those results is named “search_results”;

the same partial renders all the results wrapped in a DIV with an ID “results”;

the “results” DIV also contains the pagination links;

you have a graphic progress indicator (a “spinner”) saved in “images/spinner.gif”.

# app/views/posts/_search_results.html.erb

<div id="results">
  <% for post in @posts %>
    ... render each post ...
  <% end %>
  <%= will_paginate @posts %>
</div>

First of all, make sure your controller responds to Ajax requests by updating the “results” DIV :

# app/controllers/posts_controller.rb

def index
  @posts = Post.paginate :page => params[:page]

  respond_to do |format|
    format.html
    format.js {
      render :update do |page|
        # 'page.replace' will replace full "results" block...works for this example
        # 'page.replace_html' will replace "results" inner html...useful elsewhere
        page.replace 'results', :partial => 'search_results'
      end
    }
  end
end

Next, the unobtrusive JavaScript code:

# public/javascripts/application.js

document.observe("dom:loaded", function() {
  // the element in which we will observe all clicks and capture
  // ones originating from pagination links
  var container = $(document.body)

  if (container) {
    var img = new Image
    img.src = '/images/spinner.gif'

    function createSpinner() {
      return new Element('img', { src: img.src, 'class': 'spinner' })
    }

    container.observe('click', function(e) {
      var el = e.element()
      if (el.match('.pagination a')) {
        el.up('.pagination').insert(createSpinner())
        new Ajax.Request(el.href, { method: 'get' })
        e.stop()
      }
    })
  }
})

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

기초 정리 - 1

문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다