Smarty Forum Index Smarty
WARNING: All discussion is moving to https://reddit.com/r/smarty, please go there! This forum will be closing soon.

Alternating Row Colors

 
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    Smarty Forum Index -> Tips and Tricks
View previous topic :: View next topic  
Author Message
JasonDS
Smarty Rookie


Joined: 25 Jan 2007
Posts: 25

PostPosted: Thu Jan 25, 2007 5:49 am    Post subject: Alternating Row Colors Reply with quote

I was trying to do alternating row colors, and finally did it. It's much easier using just PHP, but not really that much harder using Smarty..

If you're wondering how to do it, here's how I did it:

Code:

<table>
      
<tr>
      <td>Col1</td>
      <td><strong>Col2</strong></td>
      <td><strong>Col3</strong></td>
</tr>

{* Assigning the colors of the rows *}
{assign var='Color1' value='#FBFBFB'}   {* Even *}
{assign var='Color2' value='#CCCCCC'}   {* Odd *}
      
{section name=st loop=$results}

{* Assigning the colors! *}
             
{if $i++ is odd by 1}
   {assign var='colour' value=$Color1}
{else}
   {assign var='colour' value=$Color2}
{/if}

{* Use the color assigned above *}
{* Sample use *}

<tr bgcolor="{$colour}">
   <td>{$i}</td>
   <td><strong>{$results[st].foo}</strong></td>
   <td><strong>{$results[st].bar}</strong></td>
</tr>       
{sectionelse}
   <strong>Sorry, there where no results!</strong>
{/section}


If you would like to add to my code, or improve upon it, please post your improvements.
Back to top
View user's profile Send private message Send e-mail
boots
Administrator


Joined: 16 Apr 2003
Posts: 5611
Location: Toronto, Canada

PostPosted: Thu Jan 25, 2007 7:48 am    Post subject: Re: Alternating Row Colors Reply with quote

JasonDS wrote:

If you would like to add to my code, or improve upon it, please post your improvements.


Hi.

Tracking values can be a useful technique; however, for a more concise method to deal with this particular problem, try Example 8-5 in the manual: http://smarty.php.net/manual/en/language.function.cycle.php

An even better idea is to modify the example to use css and then replace the cycling of bgcolor values to instead cycle class names in the class attribute. eg:

Code:
<tr class="{cycle values="row,rowalt"}">


Best Regards.
Back to top
View user's profile Send private message
redbrad0
Smarty Regular


Joined: 03 Feb 2007
Posts: 41

PostPosted: Sat Feb 03, 2007 8:00 pm    Post subject: Reply with quote

boots is right, but what if you do not want the CSS in the TR tag but in the TD tag? You can then use JasonDS's code...

Code:
{foreach from=$types item=type}
   {if $i++ is odd by 1}
      {assign var='CellCSS' value='BrowseTableCell'}
   {else}
      {assign var='CellCSS' value='BrowseTableCellAlt'}
   {/if}
             <tr>
               <td align="left" valign="top" class="{$CellCSS}">{$type.Name}</td>
               <td align="left" valign="top" class="{$CellCSS}">{$type.Desc}</td>
               <td align="left" valign="top" class="{$CellCSS}">{$type.Amount}</td>
               <td align="left" valign="top" class="{$CellCSS}">&nbsp;</td>
             </tr>
{/foreach}
Back to top
View user's profile Send private message
boots
Administrator


Joined: 16 Apr 2003
Posts: 5611
Location: Toronto, Canada

PostPosted: Sun Feb 04, 2007 12:41 am    Post subject: Reply with quote

Yup, that works great, but fwiw, {cycle} supports an assign attribute which helps cut down the amount of template code you need:

Code:
{foreach from=$types item=type}
   {cycle values='BrowseTableCell,BrowseTableCellAlt' assign=CellCSS}
             <tr>
               <td align="left" valign="top" class="{$CellCSS}">{$type.Name}</td>
               <td align="left" valign="top" class="{$CellCSS}">{$type.Desc}</td>
               <td align="left" valign="top" class="{$CellCSS}">{$type.Amount}</td>
               <td align="left" valign="top" class="{$CellCSS}">&nbsp;</td>
             </tr>
{/foreach}


That said, if you want to do something like alternate on bands (eg: 3 rows each) then the standard {if} type of logic shown is probably better suited.
Back to top
View user's profile Send private message
JasonDS
Smarty Rookie


Joined: 25 Jan 2007
Posts: 25

PostPosted: Sun Feb 04, 2007 2:39 pm    Post subject: Reply with quote

Maybe {cycle} should support more than 2 entries Smile
Back to top
View user's profile Send private message Send e-mail
boots
Administrator


Joined: 16 Apr 2003
Posts: 5611
Location: Toronto, Canada

PostPosted: Mon Feb 05, 2007 6:26 pm    Post subject: Reply with quote

JasonDS wrote:
Maybe {cycle} should support more than 2 entries Smile


It does Wink so yes, you could repeat your classes if you want to do banding.
Back to top
View user's profile Send private message
jesirose
Smarty Rookie


Joined: 04 Dec 2007
Posts: 6

PostPosted: Thu Dec 06, 2007 7:02 pm    Post subject: Re: Alternating Row Colors Reply with quote

boots wrote:
JasonDS wrote:

If you would like to add to my code, or improve upon it, please post your improvements.


Hi.

Tracking values can be a useful technique; however, for a more concise method to deal with this particular problem, try Example 8-5 in the manual: http://smarty.php.net/manual/en/language.function.cycle.php

An even better idea is to modify the example to use css and then replace the cycling of bgcolor values to instead cycle class names in the class attribute. eg:

Code:
<tr class="{cycle values="row,rowalt"}">


Best Regards.


Thanks so much, the cycle function was perfect for this and it was exactly what I was looking for!

My only complaint is that to find this thread, I actually gave up searching using the forum search, and searched google for "Alternating table row colors using Smarty". Searching on here for similar terms brought up way too many unrelated results.

Anyway, thanks for the post, because cycle is perfect for what I wanted to do!
Back to top
View user's profile Send private message
fornve
Smarty Rookie


Joined: 25 Apr 2008
Posts: 29
Location: Sheffield, UK

PostPosted: Wed Aug 19, 2009 8:43 pm    Post subject: Reply with quote

see {if $smarty.foreach.transaction_loop.index%2} class="odd"{/if} in code below

and don't forget to set name=transaction_loop in foreach statement

Code:
      <table class="datatable">
         <tr>
            <th>ID</th>
            <th>Product</th>
            <th>Created</th>
            <th>Type</th>
         </tr>
         {foreach from=$transactions item=transaction name=transaction_loop}
         <tr{if $smarty.foreach.transaction_loop.index%2} class="odd"{/if}>
            <td>{$transaction->id}</td>
            <td><a href="/VendorProduct/Edit/{$transaction->product->id}">{$transaction->product->name}</a></td>
            <td class="center">{$transaction->created|date_format:"%Y-%m-%d"}</td>
            <td>{$transaction->GetType()}</td>
         </tr>
         {/foreach}
      </table>

and css
Code:
.datatable tr.odd td               { background-color: #cfdce5; }


Good luck!
Back to top
View user's profile Send private message Visit poster's website
bimal
Smarty Elite


Joined: 19 Apr 2007
Posts: 423

PostPosted: Sun Aug 23, 2009 5:04 pm    Post subject: my sugessions Reply with quote

{cycle} is very effective in this case. Here are my few other suggestions:

Define your CSS first.
for example:

.tr0{ ... },
.tr1{ ... },
.tr2{ ... },
.tr3{ ... },

Then, within the loop,
Code:
<tr class="{cycle values='tr0,tr1'}">


For compatibility with Dreamweaver or other visual editors, use single quote ( ' ) to wrap the contents of the values.

You can write more values in the cycle loop, if you need more banding in the row-colors:
Code:
<tr class="{cycle values='tr0,tr1,tr2,tr3'}">


It does not matter, producing class="tr2", class="tr3" in the <TR...>, if you did not define .tr2{ ... } css. Any undefined pieces of css class behave as if they were not present.

If you have different loops and still need to use the {cycle}, just add a unique name to the {cycle} tag, for example: {cycle name='loop1' values='...,...,...'}, where, loop1, loop2, ... may be the names for different loops using cycle.

So, finally, writing IF within the <TR...> is more complex.
Code:
<tr{if $smarty.foreach.transaction_loop.index%2} class="odd"{/if}>
Just avoid it.
Back to top
View user's profile Send private message Visit poster's website
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    Smarty Forum Index -> Tips and Tricks All times are GMT
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group
Protected by Anti-Spam ACP