javascript - 异步操作后运行 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>');   
});

之后，我使用 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);                               
});

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

第一次，效果很好。但是，当选择另一个选项卡时，表排序器将不起作用。看起来它加载了一次，但是当再次调用时，表排序器将不会再次加载。

我做错了什么？

**更新:添加屏幕*之前(表排序器工作):

单击选项卡后(选项卡排序器不起作用):

Answer 1

一般来说，回答您的问题时，不要使用 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，请记住这一点。