will_paginate
プロジェクトでgemを使用してROR
、レコードをページに表示しています。
を使用してページ全体をリロードせずに次のページをロードしたいajax
。
ネット上でいくつかの例を見つけましたが、それらは私にはうまくいきません。
これを行う方法?
will_paginate
プロジェクトでgemを使用してROR
、レコードをページに表示しています。
を使用してページ全体をリロードせずに次のページをロードしたいajax
。
ネット上でいくつかの例を見つけましたが、それらは私にはうまくいきません。
これを行う方法?
次のコンテンツを含む新しいヘルパー(例:app / helpers / will_paginate_helper.rb)を作成します。
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
次に、ビューでこのタグをajaxページ付けに使用します。
<%= js_will_paginate @recipes %>
ページネーションリンクにはURLの既存のパラメータが含まれることに注意してください。以下に示すように、これらを除外できます。これは標準で機能をページングします:
<%= js_will_paginate @recipes, :params => { :my_excluded_param => nil } %>
それがあなたの問題を解決することを願っています。
更新1 :このソリューションを投稿した元の質問に、これがどのように機能するかについての説明を追加しました。
アップデート2:Rails 4をリモートと互換性のあるものにしました:trueリンクし、ヘルパーメソッドの名前をjs_will_paginateに変更しました。
製品をページ付けしたい場合は、これを試してください。
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 %>
views / products / index.js.erb
$('.sort_paginate_ajax').html("<%= escape_javascript(render("products"))%>")
アセット/javascripts/application.js
$(function() {
$(".sort_paginate_ajax th a, .sort_paginate_ajax .pagination a").on("click", function(){
$.getScript(this.href);
return false;
});
});
したがって、最初にすべての製品のProductでpaginateメソッドを呼び出します。ここでは、オフセットがそれに応じて設定されparams[:page]
、制限がper_page
オプションによって設定されます。またproducts
、他のページが開かれるたびにレンダリングされる部分的なレンダリングも行っています。
@products
必要な部分呼び出しでwill_paginate
メソッドを適用すると
、コントローラーで使用されるメソッド@products
も作成されます。params[:page]
これで、ajaxリクエストに応答して、作成したパーシャルをdiv
持つクラスを持つコンテンツをレンダリングします。sort_paginate_ajax
また、リクエストajaxリクエストを作成するには、のすべてのa
タグのドキュメントロードキャプチャスクリプトでdiv.sort_paginate_ajax
、falseを返します。
これで、ページはajaxリクエストで呼び出されます
これがお役に立てば幸いです。
前の答えに追加します。
コードの文字列:
$(".sort_paginate_ajax th a, .sort_paginate_ajax .pagination a").on("click", function(){
文字列に置き換えます:
$(".sort_paginate_ajax").on("click", ".pagination a", function(){
onclickイベントは、既存の要素にのみ適用されます。したがって、新しく表示されるリンクの場合は、親の「.sort_paginate_ajax」から子の「.paginationa」にクリックイベントを委任する必要があります。
JQueryを使用できます。
コントローラ:
def index
@posts = Post.paginate(:page => params[:page])
respond_to do |format|
format.html
format.js
end
end
次に、index.html.erbで:
<div id="post-content", posts: @posts >
<%= j render 'post_content' %>
</div>
部分的な'_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' %>")
必ず追加してください
$('.pagination > a').attr('data-remote', 'true');
再びJSテンプレート(index.js.erb)にあるので、Ajaxの実行時にリンクデータリモートを再度設定します。
ピエールの答えをさらに広げたいと思います。
will_paginate_materializeでmaterializesassを使用している場合は、ページネーションリンクのスタイルを設定するためのイニシャライザーがあります。
gem 'will_paginate', '~> 3.1.0'
gem 'will_paginate-materialize', git: 'https://github.com/mldoscar/will_paginate-materialize', branch: 'master'
したがって、リモートをtrueにして、will_paginate_materializeイニシャライザによってレンダリングされたリンクで機能させるために、次のようにしました。
will_paginate_helper.rb
module WillPaginateHelper
class WillPaginateJSLinkRenderer < WillPaginate::ActionView::LinkRenderer
end
def js_will_paginate(collection, options = {})
will_paginate(collection, options.merge(:renderer =>WillPaginateHelper::WillPaginateJSLinkRenderer))
end
end
will paginateマテリアライズ初期化子を次のように変更しました:
will_paginate_materialize.rb
MaterializePagination::MaterializeRenderer.module_eval do
def page_number(page)
classes = ['waves-effect', ('active' if page == current_page)].join(' ')
tag :li, link(page, page, :rel => rel_value(page)), class: classes
end
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
WillPaginate::ViewHelpers::LinkRenderer.class_eval do
def symbolized_update(target, other, blacklist = nil)
other.each_pair do |key, value|
key = key.to_sym
existing = target[key]
next if blacklist && blacklist.include?(key)
if value.respond_to?(:each_pair) and (existing.is_a?(Hash) or existing.nil?)
symbolized_update(existing || (target[key] = {}), value)
else
if value.instance_variable_defined?(:@parameters)
value = value.instance_variable_get(:@parameters)
end
target[key] = value
end
end
end
end
私の見解では、レンダラーを同じようにリンクをページングします。
= will_paginate results, renderer: MaterializePagination::Rails
ヘルパーの作成に関する@Pierreの優れた回答をフォローするために、ビューの更新に関するフォローアップの質問をいくつか見ました(最初に発生した問題)。@Pierreは、js応答を作成する必要があると述べて、その問題をフォローアップします。ヘルパーを作成した後に行ったことは次のとおりです。
私のshow.html.erbで
<div id="see-comments">
<%= render @comments %>
</div>
<div id="pagination-comments">
<%= js_will_paginate @comments %>
</div>
show.js.erbという別のファイルを作成しました(つまり、showの2つの形式)
// to update comments
$("#see-comments").html("<%= j render @comments %>");
// to update the pagination links
$("#pagination-comments").html('<%= js_will_paginate @comments %>');