I have a table that is being fed its content from a database. The table has a with your standard table header row, and then I have a foreach() that grabs information from an include and spits it out into the table body. (inserting a new each entry.)
I need the table to be initially sorted by the date closed column, and not the symbol column. I am using the Tablesorter plugin, and I tried doing this:
$(document).ready(function() {
// call the tablesorter plugin
$("#bin").tablesorter({
// sort on the first column and third column, order asc
sortList: [[6,1],[0,0]]
});
});
This works, but the issue is I have a background that is being applied to every other row from the foreach, and when table sorter sorts the rows when the page loads, the background color is not every other, but in sporadic places from table sorter moving those rows.
Here's my code:
<table cellspacing="0" cellpadding="0" id="bin" width="100%">
<thead>
<tr>
<th style="text-align:left; padding-top: 20px;" width="10%">Symbol <img src="/images/sort-arrow.jpg" alt="Sort by Symbol" class="sort-right move-left bottom-image"/></th>
<th style="text-align:left;" width="20%">Company<br><span class="move_right">Name</span> <img src="/images/sort-arrow.jpg" alt="Sort by Company Name" class="sort-right move-left"/></th>
<th style="text-align:left; padding-top: 20px;" width="23%">Industry <img src="/images/sort-arrow.jpg" alt="Sort by Industry" class="sort-right move-left bottom-image"/></th>
<th style="text-align:center;" width="10%"><span class="center-text">Buy</span><br>Date <img src="/images/sort-arrow.jpg" alt="Sort by Buy Date"/></th>
<th style="text-align:center;" width="10%"><span class="center-text">Buy</span><br>Price <img src="/images/sort-arrow.jpg" alt="Sort by Buy Price"/></th>
<th style="text-align:center;" width="10%"><span class="center-text">Closed</span><br>Price <img src="/images/sort-arrow.jpg" alt="Sort by Closed Price"/></th>
<th style="text-align:center;" width="10%"><span class="center-text">Closed</span><br>Date <img src="/images/sort-arrow.jpg" alt="Sort by Closed Date"/></th>
<th style="text-align:center;" width="10%"><span class="center-text">Total</span><br>Return <img src="/images/sort-arrow.jpg" alt="Sort by Current Return"/></th>
</tr>
</thead>
<tbody>
<?php
foreach($buylist as $a) {
$bg = ($c % 2) ? ' class="even"' : '';
//$direction = (is_numeric($a['creturn']) && $a['creturn'] >= 0) ? 'up_green' : 'down_red';
//$tick = (is_numeric($a['creturn']) && $a['creturn'] >= 0) ? '<img src="/images/icon_up.png">' : '<img src="/images/icon_down.png">';
//$tick2 = (is_numeric($a['cchange']) && $a['cchange'] >= 0) ? '<img src="/images/icon_up.png">' : '<img src="/images/icon_down.png">';
//$tick3 = (is_numeric($a['final_return_pct']) && $a['final_return_pct'] >= 0) ? '<img src="/images/icon_up.png">' : '<img src="/images/icon_down.png">';
$type = '';
$entry_price = (is_numeric($a['buyprice'])) ? '$'.$a['buyprice'] : '–';
$sold_price = (is_numeric($a['sold_price'])) ? '$'.$a['sold_price'] : '–';
$total_return= sprintf("%.02f", (($a['sold_price'] - $a['buyprice'])/$a['buyprice']) * 100);
?>
<tr<?=$bg;?>>
<td ><b><a href="/gamechangers/getaquote/?symbolsearch=<?php echo $a['symbol']; ?>"><?=$a['symbol'];?></a></b><?=$type;?></td>
<td><?=$a['name'];?></td>
<td valign="top"><?=$a['industry'];?></td>
<td align="center"><?=$a['buydate'];?></td>
<td align="center"><?=$entry_price;?></td>
<td align="center"><?php echo $sold_price; ?></td>
<td align="center"><?=$a['sold_date'];?></td>
<td align="center"><?php echo $total_return; ?>%</td>
</tr>
<?php
$c++;
}
?>
</tbody>
</table>
CSS for the table:
table#bin, table#fallen, table#growth, table#turn { margin:10px 0; border:1px solid #ccc; }
th, td { padding:10px 7px; }
tr th { background:#ededed; color:#545454; font-weight:bold; cursor:pointer;}
#bin tr.even td { background:#e1eff1; }
#turn tr.even td { background:#f7f2d8; }
#fallen tr.even td { background:#f2dcbd; }
#growth tr.even td { background:#deefdc; }
td.title a { text-decoration:none; display:block; text-transform:uppercase; font-weight:bold;}
#bin td.title { background:#5198a0; }
#fallen td.title { background:#e6a850; }
#turn td.title { background:#ebd870; }
#growth td.title { background:#6ab065; }
#bin td.title a { color:#182c2e; font-size:13px;}
#fallen td.title a { color:#352713; font-size:13px;}
#turn td.title a { color:#37321a; font-size:13px; }
#growth td.title a { color:#233d21; font-size:13px;}
hr { border:2px dotted #ccc; border-bottom:none; }
#tooltip { position:absolute; z-index:3000; border:1px solid #111; background-color:#eee; padding:5px; }
#tooltip h3, #tooltip div, #tooltip p { margin:0; }
.right_para_inside {
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
padding-bottom: 7px;
padding-top: 7px;
margin-bottom: 5px;
}
.right_para {
font-size: 16px;
color: #999;
}
.right_para .right_para_inside a:hover {
color: #000;
text-decoration: none;
}
So my question is, how can I have PHP automatically sort the table BY the close date?
Wanted to add another detail. The user can resort the table by clicking on the header column (thats what the table sorter plugin is used for.)
When I use the sortList function, it does sort the table by closed date as it is suppose to, but the coloring of the table (odd, even, odd) is than messed up entirely.
Instead of adding the row class via PHP, use CSS:
tr:nth-of-type(even) {
background-color:#ccc;
}
Using CSS instead of adding classes via PHP should fix your issue.