我遇到的问题可能是由于不了解 jquery 的工作原理,但无论如何我都会勇敢地问。
我在几个通过 ajax 调用实例化的表上使用 tablesorter。 div 容器淡出,填充表格,然后淡入。
这是ajax调用
$.ajax({
url: "url",
type: "GET",
cache: false,
data: 'cmd=scriptcmd',
datatype: 'html',
success: function(data)
{
$("#middle").fadeOut('slow',function(){
$("#middle").html(data);
$("table").tablesorter({
widgets: ['zebra'],
sortList: [[3,0]]});
}).fadeIn('slow');
}
});
所有这些都很好
Tablesorter 在 fadeOut 回调期间对表格进行排序并对其进行斑马纹处理。
排序可以与 fadeOut 回调一起正常工作,但不能与 zebra 小部件一起工作。单击要排序的列会触发斑马小部件,然后它就可以正常工作了。
我注意到,如果我使用 setTimeout 调用 tablesorter,即使使用 1 毫秒的计时器,它也能正常工作,但屏幕上会出现跳动,我发现这很奇怪。
有人愿意演示正确的方法吗?提前感谢大家
最佳答案
如果您希望 zebra 小部件按预期工作,则表格行必须可见。 看看jQuery.tablesorter斑马小部件代码:
ts.addWidget({
id: "zebra",
format: function (table) {
if (table.config.debug) {
var time = new Date();
}
var $tr, row = -1,
odd;
// *** loop through the visible rows ***
$("tr:visible", table.tBodies[0]).each(function (i) {
$tr = $(this);
if (!$tr.hasClass(table.config.cssChildRow)) row++;
odd = (row % 2 == 0);
$tr.removeClass(
table.config.widgetZebra.css[odd ? 0 : 1]).addClass(
table.config.widgetZebra.css[odd ? 1 : 0])
});
if (table.config.debug) {
$.tablesorter.benchmark("Applying Zebra widget", time);
}
}
});
如您所见,它仅循环遍历可见行。 在您的代码中,一旦动画完成,就会触发 fadeOut 回调函数,因此应用 zebra 小部件时行不可见。
关于javascript - jquery tablesorter zebra on fadein 不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10628840/