Zebra-striped tables using Rails 6
Zebra-striped tables are tables where row colors alternate between a light color and a dark color and can be done both using server-side code (ie. Rails) or client-side code (ie. JavaScript). I posted a question asking for the most convenient way to create zebra-striped tables to the Rails newsgroup some weeks ago and the responses I received were actually quite scathing. I’ve normally done this type of thing using server-side code when working with other programming languages (ASP, PHP, JSP, ColdFusion, etc.), but many people feel that this is an extreme no-no (and aren’t afraid to tell anyone that’ll listen to them), as it muddles up the separation of business logic from presentation.
Anyway, my point is that, regardless of what others think, I want to continue doing this type of design using server-side code and a recent post on the Code Snippets website highlights a Rails helper tag called cycle that makes this very convenient. (The name will be familiar for those that have used the Smarty templating engine for PHP.) The cycle tag is exactly the type of suggestion I was looking for when I posted my initial question to the newsgroup. Before that, I’d been using some nasty combination of if statements and the mod operator to determine the row color and that had completely uglified my code.
This is how you use the cycle helper method:
<tr class="<%= cycle("even", "odd") %>">
... use item ...
</tr>
You can read more about the cycle helper method in the Rails API.
thanks a lot for this little tip. so much easier than anything else i’ve seen.
nice. though shouldn’t that be cycle(”odd”,”even”) ??
I like the ALA approach, which is client side, and I find it’s much easier to read and code.
Add a and to your layout template and a tag to your table and the javascript handles the rest. It really cleans up the code if you have a lot of table rows.
Details here:
http://www.alistapart.com/articles/zebratables/
This doesn’t work so well though if you have more than one table you want to stripe per page.
I too had a nasty (although somewhat compact) solution to this problem, but the cycle helper wins hands down. Thanks for the tip. I really like the fact that you can give it a name:
<%= cycle(”odd”, “even”, :name => “zebra”)%>
then reset just that cycle
<% reset_cycle(”zebra”) -%>
As far as the whole server or client side argument goes, I think it depends on the project. I’ve used js solutions before, but really, the rails text helpers were meant to be used in your views.
this is very outdated… it doesn’t seem to work in rails 2.2+. I can’t find it in the official API anywhere!
strike my last comment. This works, but if you use reset_cycle it will never progress to the next item in the array. reset_cycle starts the cycle from the array[0] position (odd… odd… odd…)