Unable to sort the table for alternative rows.

Unable to sort the table for alternative rows.


Hi,
I want to know how to implement sorting, if i need to skip alternative
rows. I am able to implement basic sorting. Its urgent and important
for me.
My TD will have table in it.
Example : First row will have all the data, second row will have the
comments, will span the columns. These two rows should be treated as
one row. Every row will have comments that comes as the next row. When
sorting is done it should be based on the first row data on which
headers are definedm but the comment row should always fall next to
that.
Code:
<table border="0">
    <tr>
        <td colspan=7 align="left">
<input id="chkDispFuture" type="checkbox" name="chkDispFuture"
style="border:none" <b>Display Future dated</b>
        </td>
    </tr>
    <tr>
        <td width="110" align="middle" class="tableheader"><font
color="#397EB5">Member</font>
<a href="javascript:sortBy
('memNo')"><u>Number</u></a>&nbsp;&nbsp;&nbsp;&nbsp;<a
href="javascript:sortBy('prodSub')"><u>Account</u></a></td>
        <td width="210" align="left" class="tableheader"><a
href="javascript:sortBy('memName')" ><u>Member Name</u></a></td>
        <td width="85" align="left" class="tableheader"><a
href="javascript:sortBy('memBranch')"><u>Branch</u></a></td>
        <td width="85" align="left" class="tableheader"><a
href="javascript:sortBy('prodType')"><u>Product
Type</u></a></td>
        <td width="160" align="left" class="tableheader"><a
href="javascript:sortBy('followUpDate')" ><u>Follow Up Date</u></a></
td>
        <td width="100" align="middle" class="tableheader"><font
color="#397EB5">Past Due</font>
<a href="javascript:sortBy
('pastDueAmt')"><u>Amount</u></a>&nbsp;&nbsp;&nbsp;<a
href="javascript:sortBy('pastDueCnt')"><u>Count</u></a></td>
        <td width="210" align="left" class="tableheader"><a
href="javascript:sortBy('contactStatus')"><u>Status</u></a></td>
    </tr>
    #foreach ($actionList in $actionList)
    <tr>
        <td width="85" align="left">
            <table border = "0" width = "110">
                <tr>
                    <td width = "50%" align = "left"><a
href='javascript:loadContactInfo($!actionList.cifId, $!
actionList.contactId, $!actionList.csId, "$!
actionList.contactType")'><u>$!actionList.memNo</u></a></td>
                    <td width = "50%" align = "center">#if($!actionList.contactType
== 'IR') -- #else $!actionList.prodSub #end</td>
                </tr>
            </table>
        </td>
        <td width="150" align="left">$!actionList.fullName</td>
        <td width="110" align="left">$!actionList.memBranch</td>
        <td width="80" align="left">#if($!actionList.contactType == 'IR')
-- #else $!actionList.prodType #end</td>
        <td width="120" align="left">$!actionList.followUpDate</
td>
        <td width="100" align="left">
            <table border = "0" width = "100">
                <tr>
                    <td width = "55%" align = "right">#if($!actionList.contactType ==
'IR') -- #else $!actionList.pastDueAmt #end</td>
                    <td width = "45%" align = "center">#if($!actionList.contactType
== 'IR') -- #else $!actionList.pastDueCnt #end</td>
                </tr>
            </table>
        </td>
        <td width="110" style="word-wrap: break-word" align="left">#if($!
actionList.contactType == 'IR') Impairment -     $!
actionList.contactStatus #else $!contactStates.get("$!
actionList.contactStatus") #end
        </td>
    </tr>
    <tr>
        <td></td>
        <td colspan="5">$!actionList.comments</td>
        <td></td>
    </tr>
    <tr>
        <td colspan="7">&nbsp;<img src="images/t_ct.gif" border="0"
height="3" width="760"></td>
    </tr>
#end
</table>
Thanks,
Ramya