|
Smarty
WARNING: All discussion is moving to https://reddit.com/r/smarty, please go there! This forum will be closing soon. |
|
View previous topic :: View next topic |
Author |
Message |
JasonDS Smarty Rookie
Joined: 25 Jan 2007 Posts: 25
|
Posted: Thu Jan 25, 2007 5:49 am Post subject: Alternating Row Colors |
|
|
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 |
|
boots Administrator
Joined: 16 Apr 2003 Posts: 5611 Location: Toronto, Canada
|
Posted: Thu Jan 25, 2007 7:48 am Post subject: Re: Alternating Row Colors |
|
|
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 |
|
redbrad0 Smarty Regular
Joined: 03 Feb 2007 Posts: 41
|
Posted: Sat Feb 03, 2007 8:00 pm Post subject: |
|
|
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}"> </td>
</tr>
{/foreach} |
|
|
Back to top |
|
boots Administrator
Joined: 16 Apr 2003 Posts: 5611 Location: Toronto, Canada
|
Posted: Sun Feb 04, 2007 12:41 am Post subject: |
|
|
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}"> </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 |
|
JasonDS Smarty Rookie
Joined: 25 Jan 2007 Posts: 25
|
Posted: Sun Feb 04, 2007 2:39 pm Post subject: |
|
|
Maybe {cycle} should support more than 2 entries |
|
Back to top |
|
boots Administrator
Joined: 16 Apr 2003 Posts: 5611 Location: Toronto, Canada
|
Posted: Mon Feb 05, 2007 6:26 pm Post subject: |
|
|
JasonDS wrote: | Maybe {cycle} should support more than 2 entries |
It does so yes, you could repeat your classes if you want to do banding. |
|
Back to top |
|
jesirose Smarty Rookie
Joined: 04 Dec 2007 Posts: 6
|
Posted: Thu Dec 06, 2007 7:02 pm Post subject: Re: Alternating Row Colors |
|
|
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 |
|
fornve Smarty Rookie
Joined: 25 Apr 2008 Posts: 29 Location: Sheffield, UK
|
Posted: Wed Aug 19, 2009 8:43 pm Post subject: |
|
|
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 |
|
bimal Smarty Elite
Joined: 19 Apr 2007 Posts: 423
|
Posted: Sun Aug 23, 2009 5:04 pm Post subject: my sugessions |
|
|
{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 |
|
|
|
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
|
|