CODEWITHSUNDEEP
javascriptjqueryhtml
user3386779
user3386779

Reputation: 7175

table sorting not working after append the value

I want to short the table even I append some values in table.Now I have created a sample which is sorting in double click.If I click 'ok' button I have cleared the table and append with new values.Newly appended value doesn't get sorting 

 $(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

Upvotes: 0

Views: 566

Answers (1)

Super User
Super User

Reputation: 9642

After append data you need to call table update function

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

For ref. you can take a look http://tablesorter.com/docs/example-ajax.html

Please find updated fiddle: http://jsfiddle.net/ByGVE/49/

Upvotes: 1

Related Questions