2016-12-02 104 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 –