Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
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

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

@kimkong

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
Owner

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

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
Owner

Nicely done as well

@andrewmason

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

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
Something went wrong with that request. Please try again.