app/views/organizations/index.html.erb
<script src="assets/jquery.tablesort.js"></script>
<script>
$(document).on('ready page:load', function() {
$('table').tablesort();
});
</script>
<div class='page-header'>
<div class='container'>
<h1 class='pull-left'>Organizations</h1>
<div class='pull-right'>
<%= link_to 'New Organization', new_organization_path, class: 'btn btn-primary' %>
</div>
</div>
</div>
<div class='container'>
<div class='panel panel-default'>
<div class='panel-body'>
<%= simple_form_for @query, as: :search, url: organizations_path , method: :get do |form| %>
<div class='row'>
<%= form.input :query, as: :string, wrapper_html: { class: 'col-md-10' }, placeholder: 'Name' %>
<div class="col-md-2 pull-left">
<br />
<%= form.submit 'Search', class: 'btn btn-primary btn-block btn-lg' %>
</div>
</div>
<% end %>
</div>
</div>
</div>
<div class='container'>
<div class='panel panel-default'>
<div class='panel-heading'>
<h2>All Organizations</h2>
</div>
<div class='panel-body'>
<table class='table table-default'>
<thead>
<tr>
<th>Name<span class="glyphicon glyphicon-sort" aria-hidden="true"></span></th>
<th>Industry<span class="glyphicon glyphicon-sort" aria-hidden="true"></span></th>
<th>Phone</th>
<th>Address</th>
<th>Email<span class="glyphicon glyphicon-sort" aria-hidden="true"></span></th>
<th>Pending Cases</th>
<th>Closed Cases</th>
</tr>
</thead>
<tbody>
<%- @organizations.each do |organization| %>
<tr>
<td class='col-md-2'><%= link_to organization.name, organization %></td>
<td><%= organization.industry.titleize %></td>
<td><%= organization.phone %></td>
<td class='col-md-2'><%= organization.address %></td>
<td><%= organization.email %></td>
<td><%= organization.case_files.pending.count %></td>
<td><%= organization.case_files.closed.count %></td>
</tr>
<%- end %>
</tbody>
</table>
</div>
</div>
</div>