update backend index table filter js

This commit is contained in:
manson 2014-07-21 14:11:10 +08:00
parent 55bf9c4343
commit bbb537f7bb
1 changed files with 44 additions and 26 deletions

View File

@ -13,11 +13,11 @@
<div class="accordion-body collapse" id="collapse-<%= field %>"> <div class="accordion-body collapse" id="collapse-<%= field %>">
<div class="accordion-inner pagination-right" data-toggle="buttons-checkbox"> <div class="accordion-inner pagination-right" data-toggle="buttons-checkbox">
<% fields[field].each do |val| %> <% fields[field].each do |val| %>
<%= link_to (val[:title].blank? ? "" : t(val[:title])), "#", :onclick => "filter.addFilter('filters[#{field}][]=#{val[:id]}')", :class => "btn btn-small #{is_filter_active?(field, val[:id])}" %> <%= link_to (val[:title].blank? ? "" : t(val[:title])), "#", :onclick => "filter.addFilter('filters[#{field}][]=#{val[:id]}')", :class => "btn btn-small #{is_filter_active?(field, val[:id])}", :id => "filter_#{val[:id]}" %>
<% end %> <% end %>
</div> </div>
<div class="filter-clear"> <div class="filter-clear">
<a href="" class="btn btn-link btn-small"><i class="icons-cycle"></i> <%= t(:clear) %></a> <a href="#" onclick="filter.clearFilter();" class="btn btn-link btn-small"><i class="icons-cycle"></i> <%= t(:clear) %></a>
</div> </div>
</div> </div>
<% end %> <% end %>
@ -25,33 +25,32 @@
<% end %> <% end %>
<script type="text/javascript"> <script type="text/javascript">
var Filter = function(){ var Filter = function(dom){
var makeFilters = function(){ var makeFilters = function(){
return (window.location.search ? window.location.search.replace('?','').split('&') : []); return (window.location.search ? window.location.search.replace('?','').split('&') : []);
} }
var filters = makeFilters(), var filters = makeFilters(),
dom = null, dom = $(dom),
mainUrl = window.location.pathname; mainUrl = window.location.pathname;
var updateTable = function(url, goback){
this.init = function(d){ update = true;
dom = $(d); xurl = (url == null ? ( filters.length ? mainUrl + "?" + filters.join('&') : mainUrl ) : url);
} $.ajax({
url : xurl,
var updateTable = function(url){ type : "get",
xurl = (url == null ? ( filters.length ? mainUrl + "?" + filters.join('&') : mainUrl ) : null); dataType : "html"
$.ajax({ }).done(function(data){
url : xurl, if(!goback){
type : "get", history.replaceState(null, null, decodeURIComponent(xurl));
dataType : "html" }
}).done(function(data){
history.pushState(null, null, decodeURIComponent(xurl)); filters = makeFilters();
filters = makeFilters(); dom.html(data);
dom.html(data); $(".pagination a").click(function(){
$(".pagination a").click(function(){ updateTable($(this).attr('href'));
updateTable($(this).attr('href')); return false;
return false; });
}); })
})
} }
this.addFilter = function(filter){ this.addFilter = function(filter){
$.each(filters,function(idx,data){ $.each(filters,function(idx,data){
@ -68,6 +67,25 @@
updateTable(); updateTable();
return false; return false;
}; };
this.clearFilter = function(){
$(".filter-group a.active").removeClass("active");
filters = [];
updateTable();
return false;
}
window.onpopstate = function(event){
if(!update){
updateTable(document.location.href, true);
$(".filter-group .btn-small").removeClass('active');
$.each(document.location.search.split('&'),function(key,filter){
$('#filter_'+filter.split('=')[1]).addClass('active');
});
}
update = false;
}
} }
var filter = new Filter();
var update = false;
</script> </script>