pelister pelister - 1 month ago 5
jQuery Question

How to sort a table that is added with ajax

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

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( );
});