Incorporate Bootstrap Styling into Sortable Table Helper

application.css.erb

table th.headerSortUp,table th.headerSortDown{background-image:url(<%= asset_path('glyphicons/tablesorter-indicators.png') %>);background-position:right -23px;background-repeat:no-repeat;background-color:rgba(141, 192, 219, 0.25);-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);}
table th.header:hover{background-image:url(<%= asset_path('glyphicons/tablesorter-indicators.png') %>);background-position:right 15px;background-repeat:no-repeat;}
table th.actions:hover{background-image:none !important;}
table th.headerSortDown,table th.headerSortDown:hover{background-position:right -25px;}
table th.headerSortUp,table th.headerSortUp:hover{background-position:right -65px;}
table th.blue{color:#08b5fb;border-bottom-color:#08b5fb;}
table th.headerSortUp.blue,table th.headerSortDown.blue{background-color:#d1f1fe;}
table th.green{color:#46a546;border-bottom-color:#46a546;}
table th.headerSortUp.green,table th.headerSortDown.green{background-color:#cdeacd;}
table th.red{color:#9d261d;border-bottom-color:#9d261d;}
table th.headerSortUp.red,table th.headerSortDown.red{background-color:#f4c8c5;}
table th.yellow{color:#ffc40d;border-bottom-color:#ffc40d;}
table th.headerSortUp.yellow,table th.headerSortDown.yellow{background-color:#fff6d9;}
table th.orange{color:#f89406;border-bottom-color:#f89406;}
table th.headerSortUp.orange,table th.headerSortDown.orange{background-color:#fee9cc;}
table th.purple{color:#7a43b6;border-bottom-color:#7a43b6;}
table th.headerSortUp.purple,table th.headerSortDown.purple{background-color:#e2d5f0;}

application_helper.rb

#Place this code in your application_helper.rb
    def sortable(column, title = nil)
      title ||= column.titleize
      css_class = column == sort_column ? "#{sort_direction}" : nil
      direction = column == sort_column && sort_direction == "asc" ? "desc" : "asc"
      
      if css_class == "asc"
        header_class = "headerSortDown"
      elsif css_class == "desc"
        header_class = "headerSortUp"
      end
      
      content_tag("th", title, :"data-link" => url_for(params.merge(:sort => column, :direction => direction, :page => nil)), :class => "header multiSort #{header_class}")
        
    end

Old TableSorter Indicators

Link to older version of the asset on github:

https://github.com/twitter/bootstrap/raw/96c3e709963516a06ad6e723a7bba3fbf5fc1ba2/assets/img/tablesorter-indicators.png

sortable.js

//This code makes the th tag clickable and looks at the data-link tag we set for the url
$(document).ready(function(){
	
	$('.multiSort').click(function(){
		window.location.href = $(this).data('link');
	});
	
});

view.html.erb

<!-- This is how we would use our sortable helper method in our view -->
<table class="zebra-striped">
  <thead>
    <%= sortable "name", "Company" %>
  </thead>
  <tbody>
  <% for company in @companies %>
  <tr>
    <td>
     <%= company.name %>
    </td>
  </tr>
  <% end %>
  </tbody>
</table>

This code was based of of Ryan B's Railscasts - http://railscasts.com/episodes/228-sortable-table-columns

very nice. curious though. how are you showing icon indicators? i've been attempting to cludge in the
<i class='icon-chevron-up/down'></i> into the th conditionallly but without success so far.

FIgured it out. I grabbed the old CSS classes from an older version of Bootstrap as well as the older indicator PNG and incorporated back into my application.css.erb library - See able

i just hacked in font-awesome (much more flexible than glyphicons) into my rails project and did this -

th.headerSortUp:after {
  font-family: 'FontAwesome';
  content: "  \f077";
}
th.headerSortDown:after {
  font-family: 'FontAwesome';
  content: "  \f078";
}

Nicely done as well

Nice work, I've implemented all of this and it works well, with one exception. I'm using the themed option of the twitter-bootstrap-rails gem, and implementing sortable columns completely messes up the column sizing of the table. I'm completely at a loss as to how to fix this, any ideas?

Same problem as above. Plus the icons don't show up at all.

The only thing I can say is that it doesn't break the application, but I can't figure out the difference between with or without it.