소개

하고 싶은 일

'더보기'를 누르면 다음 기사가 나오기를 원합니다.

해봐

JavaScript가 약한 나라도 쉽게 구현할 수있었습니다.
이번에는 jQuery로 구현하고 있습니다.

구현 화면

구현 예

Output App

참고

kaminari 철저한 입문
t-taira blog > Rails에서 "더 보기" 구현

※정보의 소스가 낡고, 나의 Gem의 이해 및 jQuery의 이해가 부족하기 때문에, 적절하지 않은 표현이 포함되어 있을지도 모릅니다.

절차

Gem kaminari 설치

Gemfile

gem 'kaminari'

Controller에 메소드 추가

controllers/items/controller.rb

class ItemsController < ApplicationController

  def index
    @items = Item.all.order('created_at DESC').page(params[:page])
  end

end

kaminari를 설치하면.page(params[:page])여기의 설명으로 페이지 네이션을 짜는 것이 가능합니다.

1 페이지마다 취득 건수 지정

Controller로 지정하는 경우

controllers/items/controller.rb

class ItemsController < ApplicationController

  def index
    @items = Item.order('created_at DESC').page(params[:page]).per(10)
  end

end

Model으로 지정하는 경우

models/item.rb

class Item < ApplicationRecord
  paginates_per 10
end

보기

each 확장 부분을 부분 템플릿으로 잘라냅니다.

views/items/index.html.erb

# @items リスト展開

<%= render "shared/item-list" %>

# // @items リスト展開

views/shared/_item-list.html.erb

<% @items.each do |item| %>

# 中略

<% end %>

jQuery로 읽을 ID를 붙입니다.

views/items/index.html.erb

# @items リスト展開

<div id='item-pagenate'>
  <%= render "shared/item-list" %>
</div>

# // @items リスト展開

페이지 네이션 링크 만들기

views/items/index.html.erb

# @items リスト展開

<div id='item-pagenate'>
  <%= render "shared/item-list" %>
</div>

<%= link_to_next_page @items, 'もっと見る', remote: true, class: 'more-link', id: 'more-link' %>

# // @items リスト展開

kaminari를 설치하면link_to_next_page여기의 설명으로 페이지 네이션의 링크를 만들 수 있습니다.

또, remote: true 를 부여하는 것으로 서버에 보내지는 데이터가 json 형식이 되어 비동기 통신이 가능하게 됩니다.

jQuery 측 처리 설명

json 형식의 데이터를 받아, 돌려주는 처리의 내용을 기술합니다.

views/items/inde.js.erb

$('#item-pagenate').append("<%= escape_javascript(render 'shared/item-list', object: @items) %>")
$("#more-link").replaceWith("<%= escape_javascript(
  link_to_next_page(@items, 'もっと見る', remote: true, class: 'more-link', id: 'more-link')
) %>");

첫 번째 줄에서 id : 'item-pagenate' 부분에 append（引数を追加するメソッド）를 사용하여 次ページ分の@itemsを渡した部分テンプレート를 삽입했습니다.
2행째 이후에서는, 다음 페이지분의 링크를 표시시키기 위한 기술을 하고 있습니다(replaceWith로 원래 존재하고 있는 링크를 옮겨놓고 있습니다)

이상으로, 「더 보기」스타일의 페이지네이션은 완성입니다!

결론

jQuery가 공부 부족 때문에, 메소드의 의미를 하나하나 조사하면서 해설했을 생각입니다만, 잘못되었거나 정보가 낡으면 미안해.

다만, 기본적으로는 이쪽의 기술로 구현은 할 수 있을 것이므로, 잘 표시되지 않는 것이라면

jQuery 설정이 처음에 이루어지지 않았습니다

부분 템플릿 (render 메소드)의 기술에 잘못이있다

어느 쪽이 의심스럽다고 생각합니다.

나는 파일 이름 오기라는 간단한 실수로 쓸데없는 시간을 소비했다.

조심하세요.

✔︎