我需要为我的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 ></font></h5>'+
'<h3>€ '+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);
});
第一次运作良好。但是当选择另一个选项卡时,tablesorter不起作用。它看起来好像加载1次,但再次调用时,tablesorter将不再加载。
我做错了什么?
**更新:添加屏幕* 之前(表格分类器工作):
点击标签后(表格分拣机不起作用):
答案 0 :(得分:0)
要回答您的问题,一般来说,不是使用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 ></font></h5>'+
'<h3>€ '+item.price+' per uur</h3></td>'+
'</td>'+
'</tr>';
});
$('#route-'+item.id)
.append(string + '</tbody>')
.tablesorter();
此外,大多数浏览器已弃用align
&amp; valign
个属性和<font>
标记,因此如果您使用的是HTML5,请记住这一点。
答案 1 :(得分:0)
我得到了解决方案。 Tablesorter不能再在同一张桌子上绑定。
所以我首先删除完整的表并再次附加它。之后,可以将tablesorter绑定到此表。
// removethe table
$('#advies-content').remove();
// create it again
$('#tabs').append('<table id="advies-content"></table>');
$('#advies-content').tablesorter({
sortList: [[2,0],[3,0]]
});