rails4 will_paginate ajax 局部刷新
来源:互联网 发布:淘宝直播中控台网址 编辑:程序博客网 时间:2024/05/01 14:45
注: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 end2.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
- rails4 will_paginate ajax 局部刷新
- ajax局部刷新
- ajax局部刷新
- 局部刷新实例 ajax
- ajax局部无刷新
- Ajax局部刷新
- Ajax局部刷新
- ajax局部刷新
- $.ajax 实现局部刷新
- Ajax局部刷新
- Ajax局部刷新
- Ajax局部刷新
- AJAX 局部刷新 GridView
- ajax 局部刷新 2
- AJAX局部刷新技术
- ajax局部刷新
- Ajax实现局部刷新
- Ajax实现局部刷新
- C++中引用(&)的用法和应用实例
- To_10_r_100_8_6---有304瓶啤酒,每3个空瓶子能换一瓶新啤酒,问能喝到多少瓶啤酒?
- 自定义 TabBar
- MySQL索引背后的数据结构及算法原理
- IOS 自定义字体
- rails4 will_paginate ajax 局部刷新
- NSUserDefaults 的简单用法-数据存储
- 亿级Web系统搭建:单机到分布式集群
- Gdi+与双缓冲的图片显示(应用篇)
- Spark SQL官方文档阅读--待完善
- Sentinel-Redis高可用方案(二):主从切换
- InvocationTargetException
- Android使用UncaughtExceptionHandler捕获全局异常
- 动态规划-背包问题总述