rails4 will_paginate ajax 局部刷新

注:will_paginate是rails中常用的分页插件,但点击页数的时候,其实刷新的是整个页面,但有时候我们要求的是局部刷新,

        从网上了查了一些资料,整理如下:

1.原理是使用的ajax,rails自身的ajax有两种:ujs和json api,我们使用的是ujs

2.rails4 取消了rjs模板,请使用ujs

       具体请参照:http://chloerei.com/2012/04/21/rails-3-2-ajax-guide/

-----------------------------------------------------------------------------------------------------------------------------------------------------

1.controller,注意看response_to的写法

def my_messages
    @messages = Information.where(:user_id => @user_expand.user_id).order("created_at desc").paginate(page: params[:page], per_page: 7)
    @mess = Information.where(:user_id => @user_expand.user_id)
    respond_to do |format| # <- 这里
      format.html #这是默认请求的处理,渲染html(my_messages.html.erb)
      format.js # <- 这里是ajax请求处理,渲染js模板(my_messages.js.erb)
    end
  end
2.view,包括html和js两个模板

my_messages.html.erb
<pre name="code" class="ruby"><div class="permq_content " id="my_messages">
        <%= render partial: "messages" %>
      </div>
_messages.html.erb

 
<pre name="code" class="ruby"><div class="user_page fdtl_page " id="will_page">
  <%= will_paginate @messages, :container => false, :previous_label => '上一页', :next_label => '下一页', :inner_window => 2, :outer_window => 1 %>
</div>

<script>
    $(function () {
        $('#will_page a').attr('data-remote', 'true'); //指定分页为ajax请求
    });
</script>
注意此时js的写法,要将will_paginate的a标签 追加 data-remote="true"属性,rails会自动进行ajax解析(渲染js模板)
ps: 表单和a标签,都可以添加data-remote="true"属性,用来提交ajax请求,如果是post方法,最好使用隐藏表单来实现。
my_messages.js.erb
$('#my_messages').html(" <%= escape_javascript(render(partial: 'messages', object: @messages))%> ");

这一段,是将div内的内容替换为新的partial,并且更新其中的对象@messages,如果涉及的参数过多,可以使用下面的写法

$('#my_questions').html(" <%= escape_javascript(render(partial: 'questions', object: @questions,locals: {questions_page: @questions_page, extra: @extra}))%> ");

注意:js.erb模板并不是支持所有的js语法,请谨慎使用!(暂时没找到这方面的说明,只是在项目中遇到了)



 



  

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值