Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Incorporate Bootstrap Styling into Sortable Table Helper
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;}
#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
Link to older version of the asset on github:
https://github.com/twitter/bootstrap/raw/96c3e709963516a06ad6e723a7bba3fbf5fc1ba2/assets/img/tablesorter-indicators.png
//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');
});
});
<!-- 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>
Owner

kylekeesling commented Nov 24, 2011

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

kimkong commented Mar 8, 2012

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.

Owner

kylekeesling commented Mar 9, 2012

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

kimkong commented Mar 9, 2012

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";
}
Owner

kylekeesling commented Mar 9, 2012

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment