jquery tablesorter zebra on fadein 不起作用

jquery tablesorter zebra on fadein not working?

本文关键字：fadein 不起作用 on zebra tablesorter jquery      更新时间：2023-09-26

我遇到的问题可能是由于对jquery如何工作的无知，但无论如何我都会勇敢地问。

我正在通过 ajax 调用实例化的几个表上使用表排序器。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');
    }
 });

所有这些都工作正常

表排序

器对表进行排序，并在淡出回调期间对其进行斑马。

排序与淡出回调一起使用干净，但不适用于斑马小部件。 单击列以按顺序排序会触发 Zebra 小部件，然后它工作正常。

我注意到如果我使用 setTimeout 调用表排序器，即使使用 1 毫秒计时器也可以正常工作，但这在屏幕上很跳跃，我发现这非常黑客。

有人愿意展示正确的方法吗？提前感谢伙计们

如果您希望

Zebra 小组件按预期工作，您的表格行必须可见。看看jQuery.tablesorter zebra widget代码：

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

如您所见，它仅遍历可见行。在代码中，淡出回调函数在动画完成后触发，因此在应用 zebra 微件时行不可见。

据此，这些示例似乎正在处理jQuery v1.4.4

我已经尝试过jQuery v1.4.4和1.5.2，斑马技术可以工作，不适用于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');
    }
});​

演示

希望这有帮助

相关文章：