JQuery tablesorter plugin problem
Dear all
I use JQuery tablesorter plugin to sort and page the table.
I have 6 rows in the table and want to show 1 row each page in default.
But it always show all the rows. Are there something wrong with my code?
-
<HTML>
<HEAD><TITLE></TITLE>
<link rel="STYLESHEET" type="text/css" href="./tablesorter/themes/blue/style.css">
<link rel="STYLESHEET" type="text/css" href="./tablesorter/addons/pager/jquery.tablesorter.pager.css">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="./tablesorter/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="./tablesorter/addons/pager/jquery.tablesorter.pager.js"></script>
<SCRIPT>
$(document).ready(function() {
$('#mytable')
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager")});
});
</SCRIPT>
</HEAD>
<BODY>
<TABLE class="tablesorter" border="0" cellpadding="0" cellspacing="1" id="mytable">
<THEAD>
<TR>
<TH>Singer</TH>
<TH>Album</TH>
<TH>Date</TH>
<TH>price</TH>
</TR>
</THEAD>
<tfoot>
<TR>
<TH>Singer</TH>
<TH>Album</TH>
<TH>Date</TH>
<TH>price</TH>
</TR>
</TR>
</tfoot>
<TBODY>
<TR>
<TD>Yanzi</TD>
<TD>The Moment</TD>
<TD>2009/05/06</TD>
<TD>358</TD>
</TR>
<TR>
<TD>Mei</TD>
<TD>Bad Boy</TD>
<TD>2000/03/06</TD>
<TD>299</TD>
</TR>
<TR>
<TD>Jay</TD>
<TD>Album1</TD>
<TD>2000/05/06</TD>
<TD>310</TD>
</TR>
<TR>
<TD>Jolin</TD>
<TD>Album2</TD>
<TD>2002/11/06</TD>
<TD>333</TD>
</TR>
<TR>
<TD>Feng</TD>
<TD>Album3</TD>
<TD>2008/07/07</TD>
<TD>348</TD>
</TR>
<TR>
<TD>Yanzi</TD>
<TD>Album4</TD>
<TD>2008/11/02</TD>
<TD>360</TD>
</TR>
</TBODY>
</TABLE>
<div id="pager" class="pager">
<form>
<img src="./tablesorter/addons/pager/icons/first.png" class="first"/>
<img src="./tablesorter/addons/pager/icons/prev.png" class="prev"/>
<input type="text" class="pagedisplay"/>
<img src="./tablesorter/addons/pager/icons/next.png" class="next"/>
<img src="./tablesorter/addons/pager/icons/last.png" class="last"/>
<select class="pagesize">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</form>
</div>
</BODY>
</HTML>