源文檔在下面的URL：
https://github.com/kamionayuki/shop
用非AJAX的方式實現了查詢和排序后，還是想用AJAX的方式實現。但在此之前，需要把cookies這個隱患排除掉。無意中有了一個驚人的發現，就是在views中xxx_path是可以隨意加參數的。比如：
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
用這個方法完全可以繞過cookies，以免把相關信息暴露出去。真的是太好了。
去掉了cookies后，就想用ajax來進行查詢和排序，原理跟原來一樣，只是用了ajax的方法了，具體操作如下：
- 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]來傳送當前頁面的查詢條件
<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}) %>");
- controller中沒有多少變化，只是把cookies[:query]變成了params[:query]，同時增加了@query用來把查詢條件傳給頁面中的params[:query]。并且對@order進行了一下優化。
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
- routs中
resources :products do
collection do
get 'search'
get 'sort'
end
end
大功告成！！！
wait~~~用ajax來實現查詢和排序的好處是頁面的url地址不會把相關信息顯示出來。但上面的做法有兩個問題
- 因為用的是“get”方法，所以當鼠標移動在表頭的鏈接上時，仍然會顯示相關信息（這個應該好處理,只要把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
- 用了ajax進行排序和查詢后。從此再也不能用will_paginate進行分頁了。為這解決這個，花了兩個多小時也沒有搞定，也沒有查到資料。不知道有沒有好的方法來進行處理。參考了一下其它的網站，如果是ajax進行查詢的排序的話，就沒有分頁功能。如果有分頁功能的話，就沒有用到ajax。因此以后如果有分頁的需求，就不用ajax好了。吼吼~~~~
繼續補充(重要)
可以對will_paginate進行ajax的分頁了！！真的是無心插柳啊，哈哈哈哈。如下：
- 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>
- 增加一個_paginate.html.erb的文件
<%= will_paginate @products, renderer: BootstrapPagination::Rails %>
- _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')
-
最要注意的是，排序的ajax不要用post方法，用get方法就OK了！！
這真的是太意外了，哈哈哈
