淡入淡出的jquery tablesorter斑马不起作用？答案

【问题标题】：jquery tablesorter zebra on fadein not working?淡入淡出的jquery tablesorter斑马不起作用？
【发布时间】：2012-05-17 01:35:24
【问题描述】：

我遇到的问题可能是由于对 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 毫秒的计时器它也可以正常工作，但是这在屏幕上很跳跃，我觉得这很 hacky。

有人愿意演示正确的方法吗？先谢谢各位了

【问题讨论】：

斑马到底是做什么的？我可以让表格处理淡入淡出并且排序工作。
每隔一行更改背景颜色。眼睛很舒服

标签： javascript jquery fadein fadeout tablesorter

【解决方案1】：

如果您希望斑马小部件按预期工作，您的表格行必须可见。查看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);
        }
    }
});

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

【讨论】：

【解决方案2】：

根据 this 的说法，这些示例似乎正在处理 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');

    }
});

DEMO

希望对你有帮助

【讨论】：