Making sortable table after first loading data into table using ajax

Question

I'm creating a table without page refresh using:

<script>
function example_ajax_request() {
  $('#example-placeholder').html('<p><img src="/images/ajax-loader.gif" border="0" /></p>');
  $('#example-placeholder').load("get_data.php");
}
</script>

<input type="button" onclick="example_ajax_request()" value="Click Me!" />
<div id="example-placeholder"></div>

Where the get_data.php returns a table in the correct format ie/

<table>
 <thead>
  <tr>
   <th></th>
  </tr>
 <thead>
 <tbody>
  <tr>
   <th></th>
  </tr>
 </tbody>
</table>

I'd like to make this table sortable using the jquery plugin: http://tablesorter.com/docs/ but am having some difficulty.

If i copy and paste my table data onto the page directly and load the page the plugin works so I'm guessing it has something to so with my $(document).ready(function() ????

Any help to get my table sortable would be awesome!!!!

Answer 1

You'll need to call tablesorter on the div once its populated.

$('#example-placeholder').load("get_data.php");
$('#example-placeholder').tablesorter();