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 => "addFilter('filters[#{field}][]=#{val[:id]}')", :class => "btn btn-small #{is_filter_active?(field, val[:id])}" %>
          <% end %>
        </div>
        <div class="filter-clear">
          <a href="" class="btn btn-link btn-small"><i class="icons-cycle"></i> <%= t(:clear) %></a>
        </div>
      </div>
    <% end %>
  </div>
<% end %>

<span id="index_table">
</span>

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

<script type="text/javascript">
  filters=[];
  table_url="";

  $(function(){
    init();
    update_table();
  });

  var init = function(){
    filters = window.location.search.replace('?','').split('&');
    table_url = "";
    if(window.location.search==""){
      filters = [];
      table_url = window.location.pathname+'/index_table';
    }else{
      table_url = window.location.pathname+'/index_table';
    }
  };

  var update_table = function(url){
    if(url==null){
      if(filters.length==0){
        url = table_url;
      }else{
        url = table_url+'?'+filters.join('&');
      }
    }

    $.get(url,function(data){
      history.pushState(null, null, decodeURIComponent(url.replace('/index_table','')) );
      init();
      $("#index_table").html(data);

      $(".pagination a").click(function(){
        update_table($(this).attr('href'));
        return false;
      });
    });
  };

  var addFilter = function(filter){
    url = "";
    $.each(filters,function(idx,data){
      if(data.indexOf("page=")>-1) filters.splice(idx,1);
    });

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

    update_table();
    return false;
  };
</script>