javascript - jquery tablesorter zebra on fadein 不起作用？

Question

我遇到的问题可能是由于不了解 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 毫秒的计时器，它也能正常工作，但屏幕上会出现跳动，我发现这很奇怪。

有人愿意演示正确的方法吗？提前感谢大家

Answer 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 小部件时行不可见。