-
-
Save kylekeesling/1392144 to your computer and use it in GitHub Desktop.
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> |
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.
This code was based of of Ryan B's Railscasts - http://railscasts.com/episodes/228-sortable-table-columns