0

我遇到的问题可能是由于不了解 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 回调期间对表进行排序和斑马线处理。

排序与淡出回调一起干净地工作，但不是斑马小部件。单击要排序的列会触发斑马小部件，然后它可以正常工作。

我注意到如果我用 setTimeout 调用 tablesorter，即使使用 1 毫秒的计时器它也可以正常工作，但这在屏幕上很跳跃，我觉得这很 hacky。

有人关心演示正确的方法吗？提前谢谢各位

4

2 回答 2

4

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

于 2012-10-17T09:38:15.593 回答
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');

    }
});​

演示

希望这可以帮助

于 2012-05-17T19:30:31.473 回答