tablesorter JS not working when content generated via ajax

Question

I'm not looking to add to / append an existing table. My table is empty until results are returned via AJAX. I'm trying to sort my tables data via the javascript plugin, tablesorter.js. I have sorted my table so It's split between header and body. I can't seem to get the table rows to change though

My Code for the AJAX is;

     <script>
           $(document).ready(function() 
          { 
        $("#results").tablesorter(); 
          } 
              ); 
            </script>


               <script>  
              $(document).ready(function(){ 
           $.datepicker.setDefaults({  
                dateFormat: 'yy-mm-dd'   
           });  
           $(function(){  
                  $("#to_date").datepicker(); 
                  });  
           var to_date = $('#to_date').val(); 

$( "#genre" ).val();
    {
var value = $(this).val();          

$( "#price" ).val();
    {
var value = $(this).val();



       $('#filter').click(function(){  

              var to_date = $('#to_date').val(); 
              var request = $("#genre").val(); 
              var request1 = $("#price").val(); 

              var data = 'to_date'+'request'+'request1';
                if(to_date != '' )  
                {  
                     $.ajax({  
                          url:"filter.php",  
                          method:"POST",  
                          data: { to_date:to_date, request:request,request1:request1 }, 
                          success:function(data)  
                          {  


                               $('#results').html(data);  
                          $('#results').trigger("update");



                          }  
                     });  
                }  
                else  
                {  
                     alert("Please Select Date");  
                }  
           });  
      }; 
       }; 

        });  
           </script>






        and my code for the html / PHP is;

         <table id="results" class="tablesorter"> 
    <thead>
        <tr>  
            <th>Event</th>  
            <th>Venue</th>  
            <th>Genre</th>  
            <th>Date</th> 
            <th>Price</th>  
        </tr>  
         </thead>
               <tbody>
                  <?php  

             while($row = mysqli_fetch_array($result))  
             {  
             ?>  
                  <tr>  

                       <td><?php echo $row["event_name"]; ?></td>  
                       <td><?php echo $row["venue_name"]; ?></td>  
                       <td><?php echo $row["genre"]; ?></td>  
                       <td><?php echo $row["event_date"]; ?></td>  
                  </tr>  
             <?php  
             }  

             ?>  
                   </tbody>
                          </table>  

Answer 1

you never actually called to the plugin: $("results").tablesorter() Everytime you get your data updated you should make a all to the tablesorters update trigger so it gets its references updated.

success:function(data)  
                      {  
                          $('#results').html(data);  
                          $('#results').trigger("update");
                      }  

that should do the trick