0

いくつかの結果に対して AJAX 呼び出しを行う最初のページ (program_finder.asp) があります。

        $('#filtersForm').submit(function(){
      $('#resultsPane').load('program_finder_backend.asp',$('#filtersForm').serializeArray());
      return false;

これはうまくいきます。パラメータを送信すると、バックエンド ページで SQL が実行され、フロント エンドの resultsPane 領域に問題なくダンプされます。返される情報はテーブルです。

私がやりたいことは、返された情報のテーブルを列でソートできるようにすることです。私はこの機能が好きで、それを使いたいです：

http://www.kryogenix.org/code/browser/sorttable/

ソート可能なクラスを持つテーブルの場合、ユーザーは列の見出しをクリックしてコンテンツをソートできます。ユーザーフレンドリーだと思います。正常に動作するのは静的ページです。

私はそれをロードします

  script src="sorttable.js"></script

最初のドキュメントの先頭に。

問題は、返されたテーブルのコンテンツが最初のページの読み込み時にDOMに存在しないため、sorttable.jsがそれらを見つけられないことだと確信しています。返されたテーブルの結果を最初のページに表示するには、どこかに .live() または .on() または .delegate() が必要だと確信していますが、その方法がわかりません。

私は次のようなものが欲しいと思います：

 $('table.sortable').on('click', function(){
       // but here I don't know how to call sorttable();
        });

これが明確でない場合は、さらに情報を追加します。

編集:ソート可能なドキュメントに次のように記載されていることを追加する必要がありました。

ページ読み込み後に追加されたテーブルの並べ替え

実行時に新しいテーブルをページに追加したら (たとえば、Ajax リクエストを実行してコンテンツを取得するか、JavaScript で動的に作成することにより)、その参照を取得します (おそらく var newTableObject = document.getElementById を使用)。 (idOfTheTableIJustAdded) など)、次のようにします。

sorttable.makeSortable(newTableObject);

しかし、それは私を助けません。わかりません。

編集＃2：読みやすくするためにこれをここに置きます。私は試した：

 $('#filtersForm').submit(function(){
     $('#resultsPane').load('program_finder_backend.asp', $('#filtersForm').serializeArray(), function() {
         sorttable.makeSortable($("#resultsPane").find("table")[0]);
      return false});
    });

運の悪いドッグバートあたり。これは、最初のページから直接バックエンド ページに転送されます。

編集＃3

参照されたフィドルから Adeneo のコードを追加します。

 $('#filtersForm').submit(function(e){
e.preventDefault();
$('#resultsPane').load('program_finder_backend.asp', $('#filtersForm').serializeArray(), function() {
     sorttable.makeSortable($(this).find("table").get(0));
});
});

これはうまくいくようです.私はそれを理解したことがなかったでしょう. Dogbertにも感謝します。

4

3 に答える 3

1

これはうまくいくはずです：

$('#resultsPane').load('program_finder_backend.asp', $('#filtersForm').serializeArray(), function() {
  sorttable.makeSortable($("#resultsPane").find("table")[0]);
}
于 2012-12-27T18:13:35.287 に答える
0

フォームを送信し、テーブルをロードしてから、テーブルをプレーンDOM要素として取得し、次のmakeSortable()ように関数に渡すというデフォルトのアクションを防ぐ必要があります。

$('#filtersForm').submit(function(e){
    e.preventDefault();
    $('#resultsPane').load('program_finder_backend.asp', $('#filtersForm').serializeArray(), function() {
         sorttable.makeSortable($(this).find("table").get(0));
    });
});​
于 2012-12-27T19:23:01.370 に答える
0

誰かの助けになるかもしれないので、ここに投稿すると思いました。

Sorttable は、テーブルのコンテンツを変更するまで (おそらく AJAX リターンによって) うまく機能し、その後、この新しいコンテンツを認識せず、適切に並べ替えられなくなります。

関数 makeSortable(table) は、新しいテーブルをそこに送り込む場合に正常に機能します。これは、sorttable がテーブルを実行してソート可能にするためです。ただし、すでに makeSortable(table) を介して配置されている既存のテーブルがある場合 (おそらくページの読み込み時)、このテーブルのヘッダー セルには既に sortable イベント ハンドラーが関連付けられている可能性があり、単純に pass the table を呼び出すだけで問題が発生します。再びmakeSortableに。

これにより、今日、AJAXの変更可能なコンテンツを含むテーブルで少し面倒になり、AJAX応答の後にソートテーブルに「リロード」機能が本当に必要であることがわかりました。だからここにあります

reload: function (table) {
  // get the head row and iterate each header cell
    headrow = table.tHead.rows[0].cells;
    for (var i=0; i<headrow.length; i++) {
        // use the provided removeEvent function to get rid of the current handler
        removeEvent(headrow[i], 'click', sorttable.innerSortFunction);

        // check if there is a currently sorted col and remove class
        if (headrow[i].className.search(/\bsorttable_sorted\b/) != -1) {
            headrow[i].className = headrow[i].className.replace('sorttable_sorted','');
        }
        if (headrow[i].className.search(/\bsorttable_sorted_reverse\b/) != -1) {
            headrow[i].className = headrow[i].className.replace('sorttable_sorted_reverse','');
        }
    }
    // remove any sort indicating arrows
    sortfwdind = document.getElementById('sorttable_sortfwdind');
    if (sortfwdind) { sortfwdind.parentNode.removeChild(sortfwdind); }
    sortrevind = document.getElementById('sorttable_sortrevind');
    if (sortrevind) { sortrevind.parentNode.removeChild(sortrevind); }
    // now we can make the table sortable with it's new content
    sorttable.makeSortable(table);
}

その関数を、sorttable.js の Shaker_sort 関数の下に配置するだけです (shaker_sort の最後の中括弧の後のコンマを忘れないでください)。以前にソートされたテーブルのコンテンツを変更した場合は、それを reload に渡して、再びソート可能にします。

sorttable.reload(document.getElementById('#MyTableID'));

重要

上記の reload 関数を機能させるには、 sorttable.innerSortFunction 関数を分割して、グローバルにアクセスできるようにする必要があります。そうしないと、remove イベント ハンドラーが機能しなくなります。これを行うには、innerSortFunction を切り取って貼り付け、reload や sort_shaker と同様に sorttable の関数にするだけです。innerSortFunction 関数をカット アンド ペーストした後、次のようにイベント ハンドラーとしてヘッダーにアタッチされていることを確認します。

dean_addEvent(headrow[i],"click", sorttable.innerSortFunction);
于 2014-08-14T11:05:00.200 に答える