Create a gist now

Instantly share code, notes, and snippets.

Embed
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 comment has been minimized.

Show comment
Hide comment
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

This comment has been minimized.

Show comment
Hide comment
@kimkong

kimkong 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.

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

This comment has been minimized.

Show comment
Hide comment
@kylekeesling

kylekeesling 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

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

This comment has been minimized.

Show comment
Hide comment
@kimkong

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

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

This comment has been minimized.

Show comment
Hide comment
@kylekeesling

kylekeesling Mar 9, 2012

Nicely done as well

Owner

kylekeesling commented Mar 9, 2012

Nicely done as well

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost 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?

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

This comment has been minimized.

Show comment
Hide comment
@denisakov

denisakov Jul 16, 2013

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.

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