ROR學(xué)習(xí)筆記(38)——繼續(xù)查詢&查詢后的排序(ajax)

源文檔在下面的URL:
https://github.com/kamionayuki/shop


用非AJAX的方式實(shí)現(xiàn)了查詢和排序后滓走,還是想用AJAX的方式實(shí)現(xiàn)。但在此之前总放,需要把cookies這個(gè)隱患排除掉蛤虐。無意中有了一個(gè)驚人的發(fā)現(xiàn)获印,就是在views中xxx_path是可以隨意加參數(shù)的。比如:
view中

<%= link_to "all products", products_path(para1: "txy", para2: " ai ", para3: "txl") %>

controller中

def index
    @para = params[:para1] +params[:para2] + params[:para2]
    @product = Product.all
end

用這個(gè)方法完全可以繞過cookies胆建,以免把相關(guān)信息暴露出去躬贡。真的是太好了。
去掉了cookies后眼坏,就想用ajax來進(jìn)行查詢和排序,原理跟原來一樣酸些,只是用了ajax的方法了宰译,具體操作如下:

  1. views中
    修改index.html.erb
<h1><%= link_to "Product", root_path %></h1>
  <%= will_paginate @products, renderer: BootstrapPagination::Rails %>  
  <%= form_tag search_products_path, method: "get", remote: true do %>
  <%= label_tag :s_price, "Price" %>
  <%= text_field_tag :s_price %>
  <%= submit_tag "Search" %>
  <% end %>
<table class="table table-striped">
  <%= render partial: 'thead', locals: {query: @query, order: @order} %>
  <%= render 'tbody' %>
</table>

新增加"views/products/_thead.html.erb",并且用params[:query]來傳送當(dāng)前頁面的查詢條件

<thead>
    <tr>
      <th><%= link_to "ID", sort_products_path(sort_by: order[:p_id], query: query), remote: true %></th>
      <th><%= link_to "Name", sort_products_path(sort_by: order[:p_name], query: query), remote: true %></th>
      <th><%= link_to "Price", sort_products_path(sort_by: order[:p_price], query: query), remote: true %></th>
      <th><%= link_to "Description", sort_products_path(sort_by: @order[:p_description], query: @query), remote: true  %></th>
      <th><%=t '.actions', :default => t("helpers.actions") %></th>
    </tr>
</thead>

新增加"views/products/_tbody.html.erb"

<tbody>
<% @products.each do |product| %>
  <tr>
    <td><%= link_to product.id, product_path(product) %></td>
    <td><%= product.name %></td>
    <td><%= product.price %></td>
    <td><%= product.description %></td>
    <td>
      <%= link_to t('.edit', :default => t("helpers.links.edit")),
                  edit_product_path(product), :class => 'btn btn-default btn-xs' %>
      <%= link_to t('.destroy', :default => t("helpers.links.destroy")),
                  product_path(product),
                  :method => :delete,
                  :data => { :confirm => t('.confirm', :default => t("helpers.links.confirm", :default => 'Are you sure?')) },
                  :class => 'btn btn-xs btn-danger' %>
    </td>
  </tr>
<% end %>
</tbody>

新增加"views/products/_products.js.erb"

$("thead").next().remove();
$("thead").after("<%= j render('tbody') %>");
$("tbody").prev().remove();
$("tbody").before("<%= j render(partial: 'thead', locals: {query: @query, order: @order}) %>");
  1. controller中沒有多少變化,只是把cookies[:query]變成了params[:query]魄懂,同時(shí)增加了@query用來把查詢條件傳給頁面中的params[:query]沿侈。并且對(duì)@order進(jìn)行了一下優(yōu)化。
def index
    @products = Product.all.paginate(page: params[:page], per_page: 12)
    query = "1 = 1"
    @query = encode(query)
    respond_to do |format|
      format.html         
    end  
  end

  def sort
    @query = params[:query]
    query = decode(params[:query])
    order_query = params[:sort_by].join(" ")
    @products = Product.where(query).order(order_query).paginate(page: params[:page], per_page: 12)
    order_change(@order, params[:sort_by])
    render '_products'    
  end

  def search    
    if params[:s_price] == ""
      redirect_to :back
    else
      query = "price like \'%s\'" % params[:s_price]
      @products = Product.where(query).paginate(page: params[:page], per_page: 12)
      @query = encode(query)
      render '_products'      
    end   
  end
  
  private
    def order_init
      @order = {}
      @order[:p_price] = ["price", "desc"]
      @order[:p_id] = ["id", "desc"]
      @order[:p_name] = ["name", "desc"]
      @order[:p_description] = ["description", "desc"]
      return @order
    end

    def order_change(order, sort_by)      
      key = "p_" + sort_by.first
      value = sort_by.last
      value = value == "desc" ? "asc" : "desc"
      order[key.to_sym] = [sort_by.first, value]
    end
  1. routs中
resources :products do
    collection do
      get 'search'
      get 'sort'
    end
  end

大功告成J欣酢W菏谩!
wait~~~用ajax來實(shí)現(xiàn)查詢和排序的好處是頁面的url地址不會(huì)把相關(guān)信息顯示出來填帽。但上面的做法有兩個(gè)問題

  1. 因?yàn)橛玫氖恰癵et”方法蛛淋,所以當(dāng)鼠標(biāo)移動(dòng)在表頭的鏈接上時(shí),仍然會(huì)顯示相關(guān)信息(這個(gè)應(yīng)該好處理,只要把sort改成post篡腌,views用button_to就可以了褐荷,具體如下)
    view中
  <thead>
    <tr>
      <th><%= button_to "ID", sort_products_path(sort_by: order[:p_id], query: query), remote: true, class: "btn btn_link" %></th>
      <th><%= button_to "Name", sort_products_path(sort_by: order[:p_name], query: query), remote: true, class: "btn btn_link" %></th>
      <th><%= button_to "Price", sort_products_path(sort_by: order[:p_price], query: query), remote: true, class: "btn btn_link" %></th>
      <th><%= button_to "Description", sort_products_path(sort_by: @order[:p_description], query: @query), 
                                                                    remote: true, class: "btn btn_link"  %></th>
      <th><%=t '.actions', :default => t("helpers.actions") %></th>
    </tr>
  </thead>

routes中

resources :products do
    collection do
      get 'search'
      post 'sort'
    end
  end
  1. 用了ajax進(jìn)行排序和查詢后。從此再也不能用will_paginate進(jìn)行分頁了嘹悼。為這解決這個(gè)叛甫,花了兩個(gè)多小時(shí)也沒有搞定,也沒有查到資料杨伙。不知道有沒有好的方法來進(jìn)行處理其监。參考了一下其它的網(wǎng)站,如果是ajax進(jìn)行查詢的排序的話限匣,就沒有分頁功能抖苦。如果有分頁功能的話,就沒有用到ajax膛腐。因此以后如果有分頁的需求睛约,就不用ajax好了。吼吼~~~~

繼續(xù)補(bǔ)充(重要)

可以對(duì)will_paginate進(jìn)行ajax的分頁了U苌怼辩涝!真的是無心插柳啊,哈哈哈哈勘天。如下:

  1. index.html.erb修改一下:
<%- model_class = Product -%>
  <h1><%= link_to "Product", root_path %></h1>
  
  <%= render 'paginate' %>
  
  <%= form_tag search_products_path, method: "get", remote: true do %>
  <%= label_tag :s_price, "Price" %>
  <%= text_field_tag :s_price %>
  <%= submit_tag "Search" %>
  <% end %>
<table class="table table-striped">
  <%= render partial: 'thead', locals: {query: @query, order: @order} %>
  <%= render 'tbody' %>
</table>
  1. 增加一個(gè)_paginate.html.erb的文件
<%= will_paginate @products, renderer: BootstrapPagination::Rails %>
  1. _products.js.erb修改一下:
$("thead").next().remove();
$("thead").after("<%= j render('tbody') %>");
$("tbody").prev().remove();
$("tbody").before("<%= j render(partial: 'thead', locals: {query: @query, order: @order}) %>"); 
var flag = $(".pagination").prev();
$(".pagination").remove();
flag.after("<%= j render('paginate') %>");
$(".pagination a").attr('data-remote', 'true')
  1. 最要注意的是怔揩,排序的ajax不要用post方法捉邢,用get方法就OK了!商膊!
    這真的是太意外了伏伐,哈哈哈
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市晕拆,隨后出現(xiàn)的幾起案子藐翎,更是在濱河造成了極大的恐慌,老刑警劉巖实幕,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件吝镣,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡昆庇,警方通過查閱死者的電腦和手機(jī)末贾,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來整吆,“玉大人拱撵,你說我怎么就攤上這事”眚” “怎么了拴测?”我有些...
    開封第一講書人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)勇哗。 經(jīng)常有香客問我昼扛,道長(zhǎng),這世上最難降的妖魔是什么欲诺? 我笑而不...
    開封第一講書人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任抄谐,我火速辦了婚禮,結(jié)果婚禮上扰法,老公的妹妹穿的比我還像新娘蛹含。我一直安慰自己,他們只是感情好塞颁,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開白布浦箱。 她就那樣靜靜地躺著,像睡著了一般祠锣。 火紅的嫁衣襯著肌膚如雪酷窥。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,736評(píng)論 1 312
  • 那天伴网,我揣著相機(jī)與錄音蓬推,去河邊找鬼。 笑死澡腾,一個(gè)胖子當(dāng)著我的面吹牛沸伏,可吹牛的內(nèi)容都是我干的糕珊。 我是一名探鬼主播,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼毅糟,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼红选!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起姆另,我...
    開封第一講書人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤喇肋,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后迹辐,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體苟蹈,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年右核,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片渺绒。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡贺喝,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出宗兼,到底是詐尸還是另有隱情躏鱼,我是刑警寧澤,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布殷绍,位于F島的核電站染苛,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏主到。R本人自食惡果不足惜茶行,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望登钥。 院中可真熱鬧畔师,春花似錦、人聲如沸牧牢。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽塔鳍。三九已至伯铣,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間轮纫,已是汗流浹背腔寡。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蜡感,地道東北人蹬蚁。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓恃泪,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親犀斋。 傳聞我的和親對(duì)象是個(gè)殘疾皇子贝乎,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容