[jQuery] tablesorter with multiple tables problem
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>