附加值后表排序不起作用

时间:2016-12-02 07:06:14

标签: javascript jquery html

我想缩短表格,即使我在表格中附加了一些值。现在我已经创建了一个双击排序的示例。如果我单击“确定”按钮我已经清除了表并添加了新值。新增了附加值值无法排序

 $(document).ready(function() { 
		   $("#myTable").tablesorter(); 
			
		    $('#filter_records').click(function(){
			$('#myTable').html('');
			var html =	"<thead class='thead-inverse'><tr>" +
			"<th>name</th>"+ 
			"<th><strong>Count</strong></th>" +
			
            "</tr></thead>";
			
			for(var i=0;i<3;i++)
			{
				html =	html + "<tbody><tr>"+
				"<td>name" +i+"</td>" +
				"<td>count"+i+ "</td>" +
				"</tr></tbody>";
		    } 
		    $("#myTable").append(html);
		   });
          });
<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>
	     <thead class="thead-inverse">
		   <tr>
		    <th>name</th>
			<th>count</th>
		   </tr>	
		  </thead>
		  <tbody>
		   <tr>
		    <td>sample</td>
			<td>count</td>
		   </tr>	
		   <tr>
		    <td>sample1</td>
			<td>count1</td>
		   </tr>	
		  </tbody>
	  </table>
	  <button type="button" id="filter_records" class="btn btn-default1">Ok</button>
    </body>
  
</html>

Fiddle

1 个答案:

答案 0 :(得分:1)

追加数据后,您需要调用表更新函数

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

对于参考。你可以看看 http://tablesorter.com/docs/example-ajax.html

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