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小部件。单击列进行排序会触发zebra小部件，然后它就可以正常工作了。

我注意到如果我用setTimeout调用tablesorter，即使有1毫秒的计时器，它也能正常工作，但这在屏幕上是跳跃的，我发现这很麻烦。

有人愿意演示一下正确的方法吗？提前谢谢伙计们

Answer 1

根据的说法，这些示例似乎在jQuery v1.4.4上起作用

我已经在jQuery v1.4.4和1.5.2上试用过了，zebra可以工作，但不适用于1.4.4和1.5.2以上的版本。

$.ajax({
    url: '/echo/html/',
    dataType: 'HTML',
    type: 'POST',
    data: 'html=' + encodeURIComponent(data),
    success: function() {
        $('#tableContainer').fadeOut('slow', function() {
            $(this).html(data);
            $(this).children('.tablesorter').tablesorter({
                widgets: ['zebra'],
                sortList: [[3, 0]],
                widgetZebra: {
                    css: ["normal-row", "alt-row"]
                },
                debug: true
            });
        }).fadeIn('slow');

    }
});​

希望这能有所帮助

Answer 2

如果希望斑马小部件按预期工作，表行必须可见。看看jQuery.tablesorter zebra小部件代码：

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

如您所见，它只遍历visible行。在您的代码中，fadeOut回调函数在动画完成后触发，因此在应用zebra小部件时，行是不可见的。