Question

当我在单击追加按钮后尝试对下表中的行进行排序时，为什么从表中删除添加的数据？

以下是正在运行的代码 - http://jsfiddle.net/fXAbh/ 单击append然后尝试通过单击列标题对行进行排序，添加的行消失，我需要刚刚添加的数据也可以排序而不会被删除。

<!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>

Answer 1

每次更新后都需要调用$("#myTable").trigger("update");，以便插件知道有更新。

DEMO

Answer 2

添加新行后，您应该在表上触发更新事件。所以插件知道它必须更新其数据，用于在sort上重新绑定表。

$("#myTable").trigger("update");

工作演示 - http://jsfiddle.net/ShankarSangoli/fXAbh/2/

刚刚添加的数据在表被排序时被删除

2 个答案: