Jquery TableSorter Issue
Jquery TableSorter Issue
Hi,
Im trying to implement the jquery table sorter from tablesorter.com. My code is a follows:
- <body>
<script type="text/javascript" src="/jjets/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/jjets/js/jquery.tablesorter.min.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
</script>
<div id="home">
<div id="top-nav">
<div id="top_nav">
<div id="top_nav_links"></div>
<div id="top_nav_links"></div>
<div id="top_nav_links"></div>
<div id="top_nav_links"></div>
<div id="top_nav_links"></div>
</div>
<ul id="c-panel">
<li><a>Welcome Paul K.</a></li>
<li><a href="#">Account</a>
<ul>
<li><a href="#">Profile</a></li>
<li><a href="#">TExt</a></li>
</ul>
</li>
<li><a href="/jjets/logout.htm">Log Out</a></li>
</ul>
<div id="dateDiv">Wednesday, July 7th, 2010, 4:11:24 PM</div>
<!-- div id="searchDiv">
<table width="100%" border="0">
<tr>
<td width="75%" align="right" valign="top"><input class="forminput" type="text" /></td>
<td width="25%" valign="top"><button class="button">SEARCH</button></td>
</tr>
</table>
</div -->
<div id="logo_home"></div>
</div>
<div style="clear:both"></div>
<div id="home-right">
<div id="home-right-inner">
<div id="content_loader">
<div id="content_loader_header">WhiteBoard for T & M Deals</div>
<div id="t_m_content_cnt">
<table class="tablesorter" id="tablesorter" width="100%" border="0" cellspacing="0">
<tr rowspan='2'>
<td valign="top" id="t_m_content_head">Deal No.</td>
<td valign="top" id="t_m_content_head">Sales Rep</td>
<td valign="top" id="t_m_content_head">Client</td>
<td valign="top" id="t_m_content_head">Associate</td>
<td valign="top" id="t_m_content_head">Start</td>
<td valign="top" id="t_m_content_head">End</td>
<td valign="top" id="t_m_content_head">Extntn</td>
<td valign="top" id="t_m_content_head">Lngth</td>
<td valign="top" id="t_m_content_head">Rate</td>
<td valign="top" id="t_m_content_head">Crncy</td>
<td valign="top" id="t_m_content_head">GBP</td>
<td valign="top" id="t_m_content_head">COS</td>
<td valign="top" id="t_m_content_head">GP</td>
</tr>
<tr onclick="JJETS.deal.edit('1');">
<td valign="top">001</td>
<td valign="top">Paul K.</td>
<td valign="top">Sample Client</td>
<td valign="top">Amos K. L.</td>
<td valign="top"></td>
<td valign="top"></td>
<td valign="top"></td>
<td valign="top"></td>
<td valign="top"></td>
<td valign="top">KSH</td>
<td valign="top"></td>
<td valign="top"></td>
<td valign="top"></td>
</tr>
<tr onclick="JJETS.deal.edit('2');">
<td valign="top">002</td>
<td valign="top">Paul K.</td>
<td valign="top">Paul Client</td>
<td valign="top">Paul K. Client</td>
<td valign="top"></td>
<td valign="top"></td>
<td valign="top"></td>
<td valign="top"></td>
<td valign="top"></td>
<td valign="top">USD</td>
<td valign="top"></td>
<td valign="top"></td>
<td valign="top"></td>
</tr>
<tr onclick="JJETS.deal.edit('3');">
<td valign="top">003</td>
<td valign="top">Paul K.</td>
<td valign="top">Paul Client</td>
<td valign="top">Amos K. L.</td>
<td valign="top"></td>
<td valign="top"></td>
<td valign="top"></td>
<td valign="top"></td>
<td valign="top"></td>
<td valign="top">GBP</td>
<td valign="top"></td>
<td valign="top"></td>
<td valign="top"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$j('#content_loader').ready(function() {
// call the tablesorter plugin
$j("table").tablesorter({
// sort on the first column and third column, order asc
sortList: [[0,0], [1,0]]
});
});
</script>
</body>
</html>
I need help on this. It alerts script inside the .ready(); but no changes are done to the table contents