Problem: table sorting and pagination with jquery plugin tablesorter
Hi,
I have a table which has 100 rows which also has pagination. each page shows up 10 records. I am using jquery plugins tablesorter and pager from http://tablesorter.com/docs/. Sorting and pagination work like a charm. Now what I am trying to do is to show up a div when i click on each table cell. when i load the 1st page of the table (i.e: 10 records) it works fine. but when I either sort it or go to any other page using the pagination it stops working. the popup does not come up at all. I also just tried with an alert. Even that does not work. Can someone please help me on this?
here is the code I am using for the div popup:
HTML (placed at the bottom of the table)
- <div id="DB_popup">This is a div popup window</div>
CSS
- #DB_popup{
background:none repeat scroll 0 0 #E6EEEE;
border:1px solid red;
display:none;
height:400px;
width:640px;
position:absolute;
width:640px;
- }
JS
- $("#pagertable tbody td a").unbind("click").bind("click", function(e){
//alert ('clicked');
$var = $(this);
$left = e.pageX;
$top = e.pageY;
$("#DB_popup").css({
display : 'block',
top : parseInt($top+10),
left : parseInt($left)
});
});
My table structure:
- <table>
- <thead><th>heading</th></thead>
- <tbody>
- <tr><td><a href="#" title="">Click here for the popup</a></td></tr>
- </tbody>
- </table>
Many thanks, JB