Filter widget doesn't work with ajax in Tablesorter

Question

Updated Fiddle Example

I'm using tablesorter with the filter widget.Could anyone tell me how to update the filter after an AJAX request? As you can see in the example, all the data in the table doesn't come back when using filter after adding an extra row via AJAX.

Code:

$(function(){

  var options = {
    widthFixed : true,
    showProcessing: true,
    headerTemplate : '{content} {icon}', // Add icon for jui theme; new in v2.7!

    widgets: [ 'uitheme', 'zebra', 'stickyHeaders', 'filter' ],

    widgetOptions: {

      stickyHeaders : '',
      stickyHeaders_offset : 0,
      stickyHeaders_cloneId : '-sticky',
      stickyHeaders_addResizeEvent : true,
      stickyHeaders_includeCaption : true,
      stickyHeaders_zIndex : 2,
      stickyHeaders_attachTo : null,
      stickyHeaders_filteredToTop: true,

      zebra   : ["ui-widget-content even", "ui-state-default odd"],
      uitheme : 'jui'
    }
  };

  $(".tablesorter").tablesorter(options);


});

$(document).ready(function() { 
    $('.area button').click(function(){

        var source = $(this).data('feed');

        $.ajax({
    url: source,
    success: function (data) {

        $(data.query.results.json.json).each(function (index, item) {         
          var title = item.title,
              year = item.year, 
              job = item.Job,
              education = item.Education,
              background = item.Background,
              ingredient = item.Ingredient;
              $(".tablesorter tbody").append('<tr style="display:table-row;" class="trremove"><td>'+education+'</td><td>'+background+'</td><td>'+job+'</td><td>'+ingredient+'</td><td>'+year+'</td><td>'+background+'</td><td>'+year+'</td></tr>');

        });
       },
      });
      $("table").trigger("update");            
        var sorting = [[2,1],[0,0]]; 
        $(".tablesorter").trigger("sorton",[sorting]); 
      }); 
     return false; 
 }); 


$('.remove').click(function(){

    $('.trremove').empty();
    $(".tablesorter").trigger("update");
});

HTML:

<button class="remove">Remove</button>
<div class="area"><button>Class B</button></div>
<div class="area"><button>Class C</button></div>
<div class="area"><button>Class D</button></div>


<table class="tablesorter" cellspacing="1">
<thead>
<tr><th style="visibility:hidden;">first name</th>

<th>first name</th>
<th>last name</th>
<th>age</th>
<th>total</th>
<th>discount</th>
<th>date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name</td>
<td>peter</td>
<td>parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>jul 6, 2006 8:14 am</td>
</tr>
<tr>
<td>Age</td>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>dec 10, 2002 5:14 am</td>
</tr>
<tr>
<td>Name</td>
<td>peter</td>
<td>parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>jul 6, 2006 8:14 am</td>
</tr>
<tr>
<td>Age</td>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>dec 10, 2002 5:14 am</td>
</tr>
    <tr>
<td>Name</td>
<td>peter</td>
<td>parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>jul 6, 2006 8:14 am</td>
</tr>
<tr>
<td>Age</td>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>dec 10, 2002 5:14 am</td>
</tr>
    <tr>
<td>Name</td>
<td>peter</td>
<td>parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>jul 6, 2006 8:14 am</td>
</tr>
<tr>
<td>Age</td>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>dec 10, 2002 5:14 am</td>
</tr>
    <tr>
<td>Name</td>
<td>peter</td>
<td>parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>jul 6, 2006 8:14 am</td>
</tr>
<tr>
<td>Age</td>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>dec 10, 2002 5:14 am</td>
</tr>
    <tr>
<td>Name</td>
<td>peter</td>
<td>parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>jul 6, 2006 8:14 am</td>
</tr>
<tr>
<td>Age</td>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>dec 10, 2002 5:14 am</td>
</tr>
    <tr>
<td>Name</td>
<td>peter</td>
<td>parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>jul 6, 2006 8:14 am</td>
</tr>
<tr>
<td>Age</td>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>dec 10, 2002 5:14 am</td>
</tr>
    <tr>
<td>Name</td>
<td>peter</td>
<td>parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>jul 6, 2006 8:14 am</td>
</tr>
<tr>
<td>Age</td>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>dec 10, 2002 5:14 am</td>
</tr>
    <tr>
<td>Name</td>
<td>peter</td>
<td>parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>jul 6, 2006 8:14 am</td>
</tr>
<tr>
<td>Age</td>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>dec 10, 2002 5:14 am</td>
</tr>
    <tr>
<td>Name</td>
<td>peter</td>
<td>parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>jul 6, 2006 8:14 am</td>
</tr>
<tr>
<td>Age</td>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>dec 10, 2002 5:14 am</td>
</tr>
    <tr>
<td>Name</td>
<td>peter</td>
<td>parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>jul 6, 2006 8:14 am</td>
</tr>
<tr>
<td>Age</td>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>dec 10, 2002 5:14 am</td>
</tr>
    <tr>
<td>Name</td>
<td>peter</td>
<td>parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>jul 6, 2006 8:14 am</td>
</tr>
<tr>
<td>Age</td>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>dec 10, 2002 5:14 am</td>
</tr>
</tbody>
</table>

Answer 1

The success code is missing an update method ( updated demo ).

success: function (data) {

    $(data.query.results.json.json).each(function (index, item) {         
      ...
      $(".tablesorter tbody")
        .append('<tr>...</tr>')
        // update the internal cache so filtering will work
        .trigger('update');
    });
   },
  });