Запуск jQuery Tablesorter дважды после асинхронного действия

Question

Мне нужен совет для моего tablesorter 2.0 (http://tablesorter.com/docs/#Examples) плагина.

Сначала я создал таблицу с этой AJAX функции синхронные:

// 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>'); 
}); 

После этого я заселить эту таблицу с расстояниями при помощи функции v3 API Google Maps:

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

Google API эта функция работает асинхронно. Поэтому, когда эта таблица заполнена и заполнена, я хотел бы запустить плагин tablesorter и сделать ее сортируемой. Если функция работает асинхронно, я сделал для нее таймер:

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

Первый раз, когда он работает хорошо. Но при выборе другой вкладки tablesorter не работает. Похоже, что он хорошо загружается 1 раз, но при повторном вызове tablesorter не будет загружаться снова.

Что я сделал не так?

** Обновление: добавлены экраны * Перед (таблица сортировщик работы):

После нажатия на вкладке (Tabel сортировщик не работает):

Answer 1

У меня есть решение. Tablesorter не может быть привязан снова в той же таблице.

Поэтому я сначала удаляю полный стол и добавляю его снова. После этого табличный принтер может быть привязан к этой таблице.

// 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

Для ответьте на свой вопрос, в общем, вместо использования setTimeout, гораздо лучше включить любой код, который вы хотите запустить после завершения ajax (в пределах .done() функция)

Таким образом, в этом случае изменить этот бит кода:

.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'); 
}); 

Убедитесь не, чтобы вызвать функцию TableSorter второй раз (.tablesorter()), как это будет только вызвать проблемы; но вместо этого инициирует метод обновления, показанный в приведенном выше коде.

В качестве примечания, код, который строит вашу таблицу, может быть значительно более эффективным. С одной стороны, стараются свести к минимуму взаимодействие DOM, то есть попытка сделать все в одном 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(); 

Кроме того, большинство браузеров возражали использование align & valign атрибутов и <font> тегов, так что если вы используете HTML5, пожалуйста Запомни.