2012-03-02 46 views
0

當我嘗試在點擊追加按鈕之後對下表中的行進行排序時,爲什麼要從表格中刪除添加的數據?剛添加的數據在表格排序時被刪除

這裏是運行代碼 - http://jsfiddle.net/fXAbh/ 單擊附加,然後嘗試通過單擊列標題對行進行排序,添加的行消失,我需要添加的數據也是可排序的,不會被刪除。

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

1K +的用戶,你不知道,你不需要發佈整個html頁面? (-_-)sighhhhhhhh – Starx 2012-03-02 19:16:45

回答

2

你需要每一次更新,這將讓插件知道有一個更新之後調用$("#myTable").trigger("update");

DEMO

相關問題