Hi, I am trying to use the plugin tablesorter that has a pager, for one table in a page it works fine, but when I put two tables, the pager links [next, previous,....] for the first table is moved under the second table.
Please your help is appreciated. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en-us"> <head> <title>jQuery plugin: Tablesorter 2.0 - Pager plugin</title> <link rel="stylesheet" href="css/jq.css" type="text/css" media="print, projection, screen" /> <link rel="stylesheet" href="../themes/blue/style.css" type="text/ css" media="print, projection, screen" /> <script type="text/javascript" src="../jquery-latest.js"></script> <script type="text/javascript" src="../jquery.tablesorter.js"></ script> <script type="text/javascript" src="../addons/pager/ jquery.tablesorter.pager.js"></script> <script type="text/javascript" src="js/chili/chili-1.8b.js"></script> <script type="text/javascript" src="js/docs.js"></script> <script type="text/javascript"> $(function() { $("table") .tablesorter({widthFixed: true, widgets: ['zebra']}) .tablesorterPager({container: $("#pager")}); }); </script> </head> <body> <div id="main"> <h1>First Table</h1> <table cellspacing="1" class="tablesorter"> <thead> <tr> <th>Current Reviewer</th> <th>Arrival Date</th> <th>Proposal #</th> <th>Routing #</th> <th>Deadline Date</th> <th>Days</th> <th>OSP administrator</th> <th>PI</th> <th>Lead Unit</th> <th>Pgogram Ann Number</th> <th>Sponsor Name</th> </tr> </thead> <tbody> <tr> <td>jimewhite</td> <td>5/8/09 08:14</td> <td>00005638</td> <td>1</td> <td>05/15/09</td> <td>0</td> <td>DeNutte, Kara L</td> <td>Norwak, Michael</td> <td>Kavli Inst for Astr</td> <td>NNH09ZDA001N</td> <td>NAZA-wHASHINGTON</td> </tr> ............ more ..........<tr><td>.....</td></tr> </tbody> </table> <div id="pager" class="pager"> <form> <img src="../addons/pager/icons/first.png" class="first"/> <img src="../addons/pager/icons/prev.png" class="prev"/> <input type="text" class="pagedisplay"/> <img src="../addons/pager/icons/next.png" class="next"/> <img src="../addons/pager/icons/last.png" class="last"/> <select class="pagesize"> <option selected="selected" value="10">10</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> </select> </form> </div> <h1>Second table</h1> <table cellspacing="1" class="tablesorter"> <thead> <tr> <th>Current Reviewer</th> <th>Arrival Date</th> <th>Proposal #</th> <th>Routing #</th> <th>Deadline Date</th> <th>Days</th> <th>OSP administrator</th> <th>PI</th> <th>Lead Unit</th> <th>Pgogram Ann Number</th> <th>Sponsor Name</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>5/8/09 08:14</td> <td>00005638</td> <td>1</td> <td>05/15/09</td> <td>0</td> <td>DeNutte, Kara L</td> <td>Norwak, Michael</td> <td>Kavli Inst for Astr</td> <td>NNH09ZDA001N</td> <td>NAZA-wHASHINGTON</td> </tr> ............ more .......<tr><td>.....</td></tr> </tbody> </table> <div id="pager" class="pager"> <form> <img src="../addons/pager/icons/first.png" class="first"/> <img src="../addons/pager/icons/prev.png" class="prev"/> <input type="text" class="pagedisplay"/> <img src="../addons/pager/icons/next.png" class="next"/> <img src="../addons/pager/icons/last.png" class="last"/> <select class="pagesize"> <option selected="selected" value="10">10</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> </select> </form> </div> </div> </body> </html>
