Tab Panel plus table pagination
Hello,
I am using Jquery UI tab panel script..one of the tab loads its content with ajax. This remote page has table that uses Jquery Pagination script...
Now issue is where to place pagination Div...If I place pagination div on page which has tab panel then pagination link are coming outside the tab panel.. and if I place pagination div in remote page then pagination links comes inside tab panel but pagination link doesn't work for second link or so....
Is there anyone who faced this issue? How was that resolved/
Here is my code if it helps in understand the problem...
1.) Main.jsp
<div id="myFriends">
<ul>
<li><a href="<s:url value="myInvites_input.action"/>" title="My Invites"><span>My Invites</span></a></li>
</ul>
</div>
<div id="My_Invites"> ... </div>
<span id="myInvitesPagination" class="pagination"> </span>
2.) RemotePage.jsp
<s:hidden name="invitesCount" value="${invitesCount}"/>
<s:hidden name="invitesPageSize" value="${invitesPageSize}"/>
<table width="600" cellpadding="1" cellspacing="1" bgcolor="#e2e2e2">
<tr>
<td width="150" align="center" class="h3">Email Address </td>
<td width="150" align="center" class="h3">Invite Date</td>
<td width="75" align="center" class="h3">Status</td>
<td width="150" align="center" class="h3"></td>
</tr>
<s:if test="myInvitesTO.size > 0">
<s:iterator value="myInvitesTO" >
<tr>
<td align="center" bgcolor="#FFFFFF"><s:property value="email"/></td>
<td align="center" bgcolor="#FFFFFF"><s:date name="inviteDate" format="dd-MMM-yyyy hh:mm aa" /></td>
<td align="center" bgcolor="#FFFFFF"><s:property value="inviteStatus"/></td>
<td align="center" bgcolor="#FFFFFF">
<s:if test="%{inviteStatus == 'Open'}">
<div id='invitesId${myInvitesId}'>
<a href="myInvites_reSend.action?myInviteTo.myInvitesId=${myInvitesId}&myInviteTO.inviteId=${inviteId}">Send New Invitation</a>
</div>
</s:if>
</td>
</tr>
</s:iterator>
</s:if>
<s:else>
<tr>
<td align="left" colspan="4" bgcolor="#FFFFFF">
There is no Invitation from you.
</td>
</tr>
</s:else>
</table>
3.) Javascript code..
var $tabs = $('#myFriends ul').tabs({
load: function(e, ui){
var invitesCount = $("#invitesCount").val();
var invitesPageSize = $("#invitesPageSize").val();
$("#myInvitesPagination").pagination(invitesCount, {
items_per_page:invitesPageSize,
callback: function (page_id, jq) {
var url = "myInvites_input.action?currentPage=" + page_id;
$(ui.panel).load(url);
return false;
}
});
}
});
});
Here each pagination link click returns RemotePage.jsp with new data....
Any thought on problem..
Thanks in advance...