Question

I add a table dynamically to the page through ajax call, the table is paginated and again uses ajax call for pagination. but when I try to use jQuery plugins to sort the table it doesn’t work.

<script>
var targetURL = 'http://localhost/includes/qrmanager.php?start=' + pageno;   

    $('#qrmanager').html('<p><img src="images/ajax-loader.gif" /></p>');        
    $('#qrmanager').load( targetURL ).hide().fadeIn('slow'); //this loads the table within the div

 $("table").tablesort( );
</script>

I have a plugin for tablesort(), it works if I just echo the table via php without using ajax.

Answer 1

You’re attempting to sort the table before AJAX has a chance to load it.

Use the success callback to the .load method instead:

var targetURL = 'http://localhost/includes/qrmanager.php?start=' + pageno;   
$('#qrmanager').html('<p><img src="images/ajax-loader.gif" /></p>');
$('#qrmanager').load( targetURL, function() {
    $(this).hide().fadeIn('slow'); 
    $("table").tablesort( );
});