When I try to sort rows on below table after clicking the append button why is the added data removed from the table ?
Here is the running code – http://jsfiddle.net/fXAbh/
Click append and then try to sort a row by clicking on the column header, the added row disappears, I need the just added data to also be sortable and not be removed.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://tablesorter.com/__jquery.tablesorter.js" type="text/javascript"></script>
<script src="http://tablesorter.com/addons/pager/jquery.tablesorter.pager.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://tablesorter.com/themes/blue/style.css" type="text/css" media="print, projection, screen" />
<script type="text/javascript">
$(document).ready(function() {
{
$("#myTable").tablesorter({widthFixed: true, widgets: ['zebra']}).tablesorterPager({container: $("#pager")});
$("#pager").css('top','auto');
}
});
function append() {
$('#myTable > tbody:last').prepend('<tr><td>test</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>');
};
</script>
</head>
<body>
<input type="button" value="Append" onclick="append();" />
<table id="myTable" cellspacing="1" class="tablesorter">
<thead>
<tr>
<th>Name</th>
<th>Major</th>
<th>Sex</th>
<th>English</th>
<th>Japanese</th>
<th>Calculus</th>
<th>Geometry</th>
</tr>
</thead>
<tbody>
<tr>
<td>Student01</td>
<td>Languages</td>
<td>male</td>
<td>80</td>
<td>70</td>
<td>75</td>
<td>80</td>
</tr>
<tr>
<td>AStudent01</td>
<td>Languages</td>
<td>male</td>
<td>80</td>
<td>70</td>
<td>75</td>
<td>80</td>
</tr>
</tbody>
</table>
<div id="pager" class="pager">
<form>
<input type="text" class="pagedisplay"/>
<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>
</body>
</html>
After appending a new row you should trigger the update event on the table. So that plugin knows that it has to update its data which is used to rebind the table on sort.
Working demo – http://jsfiddle.net/ShankarSangoli/fXAbh/2/