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コールバック中にテーブルを並べ替え、ゼブラします。

並べ替えはfadeOutコールバックで正常に機能していますが、zebraウィジェットでは機能していません。列をクリックして並べ替えると、ゼブラウィジェットがトリガーされ、正常に機能します。

setTimeoutを使用してtablesorterを呼び出すと、1ミリ秒のタイマーを使用しても正常に機能することに気付きますが、これは画面上でびくびくしていて、非常にハッキーです。

誰かが正しい方法を示すことを気にしますか？よろしくお願いします

4

2 に答える 2

4

ゼブラウィジェットを期待どおりに機能させるには、テーブルの行が表示されている必要があります。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ウィジェットが適用されているときに行は表示されません。

于 2012-10-17T09:38:15.593 に答える
1

thisによると、例は取り組んでいるようです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');

    }
});​

デモ

お役に立てれば

于 2012-05-17T19:30:31.473 に答える