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])}" %>
          <% 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 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){
      xurl = (url == null ? ( filters.length ?  mainUrl + "?" + filters.join('&') : mainUrl ) : null);
      $.ajax({
        url : xurl,
        type : "get",
        dataType : "html" 
      }).done(function(data){
        history.pushState(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;
    }
  }
  var filter = new Filter("#index_table");
</script>