Skip to content

Instantly share code, notes, and snippets.

@kylekeesling
Created November 24, 2011 19:50
Show Gist options
  • Save kylekeesling/1392144 to your computer and use it in GitHub Desktop.
Save kylekeesling/1392144 to your computer and use it in GitHub Desktop.
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>
@kylekeesling
Copy link
Author

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

@kimkong
Copy link

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.

@kylekeesling
Copy link
Author

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
Copy link

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

@kylekeesling
Copy link
Author

Nicely done as well

Copy link

ghost commented Aug 23, 2012

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?

@denisakov
Copy link

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