Run jQuery Tablesorter twice after asynchronous action

Question

I need some advice for my tablesorter 2.0 (http://tablesorter.com/docs/#Examples) plug-in.

First I created an table with this AJAX function synchronous:

// create head
$('#advies-content').append(
'<thead>'+
    '<tr">'+
        '<th></th>'+
        '<th>Icoon</th>'+
        '<th>Afstand</th>'+
        '<th>Tijd</th>'+
        '<th>Opties</th>'+
    '</tr>'+
'</thead>');

// create body
$.each(options,function(key,item){
    // make tab content
    $('#advies-content').append('<tr id="route-'+item.id+'">');
    $('#advies-content').append('</tr>');

        // image
        $('#route-'+item.id).append('<td  valign="top"></td>');
        $('#route-'+item.id).append('<td  valign="top"  align="center"><img src="'+item.image+'"></td>');

        // distance
        $('#route-'+item.id).append('<td valign="top">'+                  
        '</td>');
        // time
        $('#route-'+item.id).append('<td valign="top">'+                      
        '</td>');               

        // distance + time
        $('#route-'+item.id).append('<td  valign="top">'+
            '<h5 class="click-route" mylatlng="'+item.destination+'"><font color="#21bba3">Route bepalen &gt;</font></h5>'+
            '<h3>&euro; '+item.price+' per uur</h3></td>'+
        '</td>');   
});

After that i populate this table with distances by using the Google Maps v3 API:

// function to handle the distance
calculateDistance(origin,destination).then(function(response) {                 
    var origins = response.originAddresses;                                                     
    var destinations = response.destinationAddresses;
    var results = response.rows[0].elements;
        var array = [];                             
        array[0] = results[0].distance.text;
        array[1] = results[0].duration.text;
    return array;
    }).done(function(distanceMatrixResult) {
        distance = distanceMatrixResult[0]; 
        time = distanceMatrixResult[1]; 
    $('#route-'+item.id).find('td:eq(2)').html(distance);
    $('#route-'+item.id).find('td:eq(3)').html(time);                               
});

The Google API this function runs asynchronous. So when this table is complete and filled, i,d like to run the tablesorter plug-in on it and make it sortable. Beacause the function runs asynchronous i made an timer for it:

function doTableSorter(){
   $("#advies-content").tablesorter();  
}

// run on tab click
$('#advies_block li').click(function(){
   // function to create and populate table
   getSelectedTabData();
   // make table sorter 
   setTimeout(doTableSorter, 500);
}); 

The first time it works well. But when selection another tab the tablesorter does not work. It looks like it load well 1 time but when calling again the tablesorter will not load again.

What did I do wrong?

**Update: added screens* Before (table sorter works):

After click on tab (tabel sorter does not work):

Answer 1

I got the solution. Tablesorter cannot be binded again on the same table.

So i first remove the complete table and append it again. After that the tablesorter can be binded to this table.

// removethe table
$('#advies-content').remove();
// create it again
$('#tabs').append('<table id="advies-content"></table>'); 

$('#advies-content').tablesorter({
  sortList: [[2,0],[3,0]] 
}); 

Answer 2

To answer your question, in general, instead of using a setTimeout, it is much better to include whatever code you want to run after the ajax has finished (within the .done() function)

So, in this case, modify this bit of code:

.done(function(distanceMatrixResult) {
        distance = distanceMatrixResult[0];
        time = distanceMatrixResult[1];
    $('#route-'+item.id).find('td:eq(2)').html(distance);
    $('#route-'+item.id).find('td:eq(3)').html(time);
    // update tablesorter content
    $("#advies-content").trigger('update');
});

Make sure not to call the tablesorter function a second time (.tablesorter()) as it will only cause problems; but instead trigger an update method, shown in the code above.

As a side note, the code that builds your table can be made much more efficient. For one, try to minimize DOM interaction, meaning try to do everything in one append():

// create head
var string = '<thead>'+
    '<tr">'+
        '<th></th>'+
        '<th>Icoon</th>'+
        '<th>Afstand</th>'+
        '<th>Tijd</th>'+
        '<th>Opties</th>'+
    '</tr>'+
'</thead>'+
'<tbody>';

// create body
$.each(options,function(key,item){
    // make tab content
    string += 
    '<tr id="route-'+item.id+'">';

        // image
        '<td  valign="top"></td>'+
        '<td  valign="top"  align="center"><img src="'+item.image+'"></td>'+

        // distance
        '<td valign="top">'+
        '</td>'+
        // time
        '<td valign="top">'+
        '</td>'+

        // distance + time
        '<td  valign="top">'+
            '<h5 class="click-route" mylatlng="'+item.destination+'"><font color="#21bba3">Route bepalen &gt;</font></h5>'+
            '<h3>&euro; '+item.price+' per uur</h3></td>'+
        '</td>'+
    '</tr>';
});

$('#route-'+item.id)
    .append(string + '</tbody>')
    .tablesorter();

Also, most browsers have deprecated use of align & valign attributes, and <font> tags, so if you are using HTML5, please keep that in mind.