2012-05-30 14 views
9

jQuery loadコマンドでロードするテーブルがあります。ロード関数のコールバックでは、私はtablesorterプラグインを開始します。何らかの理由で、テーブルは昇順ではなく降順でのみソートされます。私がシフトを保持する場合、それは昇順と降順の間で正しく切り替えるでしょうか?ここで何が起こっているか考えてみましょうか?jquery tablesorter ajaxテーブルの一方向の並べ替えのみ

table.php

<table id="xyz"> 
<thead> 
    <tr> 
     <th>hi</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>a</td> 
    </tr> 
    <tr> 
     <td>b</td> 
    </tr> 
    <tr> 
     <td>c</td> 
    </tr> 
</tbody> 
</table> 

jqueryの

$("#myDiv").load("table.php", function() { 
    $("#xyz").tablesorter(); 
}); 

予想通り、私はその後、tablesorter機能をAJAXを経由して、テーブルをロードしない場合。

+0

私が本当に速くクリックすると、昇順にソートされているように見えますが、降順にソートされます。 –

+3

ファイルのどこにでも '.tablesorter()'を宣言していますか?あなたはダブルバインディングかもしれません... – Jason

+0

いい考えですが、私は一度だけ.tablesorter()を呼び出しています –

答えて

9

私はJasonの考えのようにダブルバインディングしていました。

私は実際にクラスでjQueryのロード関数を呼び出していましたが、私はそのクラスで2つのdivをページに持っていました。だから、実際にコールバック関数を2回呼び出していましたか?

両方のdivにロードされているコンテンツが同じだが、jQueryがそれぞれのdivごとに別々のajax呼び出しを行うように見えるのは異常な動作だと思う。コメントしてくれてありがとう!

+0

私は同じ問題を抱えていましたが、私は頭にjqueryの2つのバージョンをロードしていました。あなたの質問は、私がそれを把握させていただきました、ありがとう –

1

問題は既に解決されていますが、私は同じ問題があったと言います。理由は古いバージョンのjqueryにあります。1.4.2,1.4.4が必要でした。

5

他の誰かがこの問題に遭遇した場合に、私はここで別の答えを投げると思っていました。これは私がidセレクターの代わりにクラスセレクターを使ってテーブル上で.tablesorter()を呼び出そうとしたときに起こったことです。だから、私にとっては、この問題を修正(これを反映するマークアップ)

$('#tablesorter').tablesorter();

$('.tablesorter').tablesorter();

からそれを変えます。

5

もう一度、これがどのように解決されたかを見て、別のシナリオを共有したいと思います。

マイテーブル本体行は.ajax呼び出しから動的に作成され、一度ユーザが追加/修正する/行を削除し、その後、テーブル本体の行が.removed()あり、function()介して同じ.ajaxコールで再作成。テーブルの頭が残っているので、これはもちろんテーブル・バインダーを二重バインドするため、奇妙な動作が発生します。

私のための修正は前にそうような$('#mytable').addClass('tablesorter').tablesorter();を初期化するtablesorterのバインドを解除することでした:

$('#mytable') 
    .unbind('appendCache applyWidgetId applyWidgets sorton update updateCell') 
    .removeClass('tablesorter') 
    .find('thead th') 
    .unbind('click mousedown') 
.removeClass('header headerSortDown headerSortUp'); 

別の修正が.ajaxコールだけではなく、身体<tr>年代で全体のテーブルを作成するかもしれません。

希望これは、私は同じ問題が異なるセットアップを持っていたし、このスレッドで述べた答えは私の問題を解決していなかった

+0

正しい答えは私はプラグインのドキュメントで以前のバインディングを削除する方法を見つけることができませんでした。 – AdityaSaxena

1

に役立ちます。誰か他の人が同じ問題を抱えている場合のために私のシナリオのためのソリューションを追加する。

テーブル本体の行は、ページロード時に.ajax呼び出しから動的に作成され、データがロードされた後にソートするデフォルトのsortListとして1つの列が設定されます。

新しい日付範囲を送信することに基づいて、5個のうち10個の列が再設定されます。私はテーブル本体を再構築するのではなく、適切なレコードにデータを注入し、次にデフォルトのsortListに基づいて処理します。

私の問題は、新しい日付範囲を提出した後で、ヘッダに2回ソートされるので、片方だけをソートするように見えるようになりました。

私の解決策は、tablesorterヘッダーが2回初期化されないようにすることでした。ページの読み込み時に、私はtablesorter私は設定sortlistがプロパティに設定された一つの列を並べ替えてみましょう、しかし、すべての新しい日付範囲がsubmitedデータロード後に私の列をソートするために、私は、ユーザーに次の行:

$('#mytableBody').trigger("update"); 
var sorting = [[5, 1]]; 
setTimeout(function() {$('#mytableBody').trigger('sorton', [sorting]) }, 1); 

私はのsetTimeoutを使用しますソートする前にデータが完全にロードされていることを確認します。

これが役に立ちます。

関連する問題