announcement-test/app/views/admin/announcements/index.html.erb

<% content_for :right_nav do %>
  <ul class="nav nav-pills filter-nav pull-right">
    <% @filter_fields.keys.each do |field| %>
      <li class="accordion-group">
        <div class="accordion-heading">
          <a href="#collapse-<%= field %>" data-toggle="collapse" data-parent="#filter" class="accordion-toggle"><%= t(field) %></a>
        </div>
      </li>
    <% end %>
  </ul>
  <div class="filter-group accordion-group">
    <% @filter_fields.keys.each do |field| %>
      <div class="accordion-body collapse" id="collapse-<%= field %>">
        <div class="accordion-inner pagination-right" data-toggle="buttons-checkbox">
          <% @filter_fields[field].each do |val| %>
            <%= link_to 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 %>
        </div>
        <div class="filter-clear">
          <a href="#" onclick="filter.clearFilter();" class="btn btn-link btn-small"><i class="icons-cycle"></i> <%= t(:clear) %></a>
        </div>
      </div>
    <% end %>
  </div>
<% end %>

<span id="index_table">
  <%= render 'index'%>
</span>

<%= render 'layouts/delete_modal', delete_options: @delete_options %>

<script type="text/javascript">
  var update = false;

  var Filter = function(dom){
    var makeFilters = function(){
      return (window.location.search ? window.location.search.replace('?','').split('&') : []);
    }
    var filters = makeFilters(),
        dom = $(dom),
        mainUrl = window.location.pathname;
    var updateTable = function(url, goback){
      update = true;
      xurl = (url == null ? ( filters.length ?  mainUrl + "?" + filters.join('&') : mainUrl ) : url);
      $.ajax({
        url : xurl,
        type : "get",
        dataType : "html" 
      }).done(function(data){
        if(!goback){
          history.replaceState(null, null, decodeURIComponent(xurl));  
        }
        
        filters = makeFilters();
        dom.html(data);
        $(".pagination a").click(function(){
          updateTable($(this).attr('href'));
          return false;
        });
      })
    }
    this.addFilter = function(filter){
      $.each(filters,function(idx,data){
        if(data.indexOf("page=")>-1) filters.splice(idx,1);
      });

      if( (index = filters.indexOf(filter) ) > -1){
        mainUrl = mainUrl.replace(filter,'');
        filters.splice(index,1);
      }else{
        filters.push(filter);
      }

      updateTable();
      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("#index_table");
</script>