2016-12-02 21 views
0

我想短表,即使我在表格中追加一些值。現在我創建了一個示例,它是雙擊排序。如果我點擊'確定'按鈕,我已清除表格並與新values.Newly附加價值追加沒有得到排序表格排序不工作後追加值

$(document).ready(function() { 
 
\t \t $("#myTable").tablesorter(); 
 
\t \t \t 
 
\t \t  $('#filter_records').click(function(){ 
 
\t \t \t $('#myTable').html(''); 
 
\t \t \t var html = \t "<thead class='thead-inverse'><tr>" + 
 
\t \t \t "<th>name</th>"+ 
 
\t \t \t "<th><strong>Count</strong></th>" + 
 
\t \t \t 
 
      "</tr></thead>"; 
 
\t \t \t 
 
\t \t \t for(var i=0;i<3;i++) 
 
\t \t \t { 
 
\t \t \t \t html = \t html + "<tbody><tr>"+ 
 
\t \t \t \t "<td>name" +i+"</td>" + 
 
\t \t \t \t "<td>count"+i+ "</td>" + 
 
\t \t \t \t "</tr></tbody>"; 
 
\t \t  } 
 
\t \t  $("#myTable").append(html); 
 
\t \t }); 
 
      });
<html> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.27.8/js/jquery.tablesorter.js"></script> 
 
    </head> 
 
    <body> 
 
     <table id="myTable" border=1> 
 
\t  <thead class="thead-inverse"> 
 
\t \t <tr> 
 
\t \t  <th>name</th> 
 
\t \t \t <th>count</th> 
 
\t \t </tr> \t 
 
\t \t </thead> 
 
\t \t <tbody> 
 
\t \t <tr> 
 
\t \t  <td>sample</td> 
 
\t \t \t <td>count</td> 
 
\t \t </tr> \t 
 
\t \t <tr> 
 
\t \t  <td>sample1</td> 
 
\t \t \t <td>count1</td> 
 
\t \t </tr> \t 
 
\t \t </tbody> 
 
\t </table> 
 
\t <button type="button" id="filter_records" class="btn btn-default1">Ok</button> 
 
    </body> 
 
    
 
</html>

Fiddle

回答

1

附加數據後,你需要調用表更新功能

$("#myTable").trigger("update"); 
$("#myTable").trigger("sorton",[sorting]); 

對於ref。你可以看看 http://tablesorter.com/docs/example-ajax.html

請找到更新的小提琴: http://jsfiddle.net/ByGVE/49/

+0

可以請你更新我的代碼 – user3386779

+0

您可以用小提琴,然後我們就可以更新您R代碼裏面 –

+0

你可以從這裏走的參考分享當前的代碼。 http://tablesorter.com/docs/example-ajax.html –