1

すべてサーバー側の処理を使用する多数の jQuery DataTable があります。ページングとソートのセットアップが完了し、すべてが正常に機能しています。これらのテーブルには、行を選択して何らかの処理を実行できるようにするチェックボックスの列が少なくとも 1 つあります。チェックボックスがチェックされている場合、ユーザーがページングまたはソートを希望していることを確認したいと思います。

できると思ったこと（できなかったこと）

"fnPreDrawCallback" : function(table) {
    if (CullAddress.AddressIsChecked()) {
        var $warningDiv = $('div#pageWarning');
        var warningText = "One or more Addresses are selected for Excluding or Tagging.  Are you sure you wish to nvaigate away?";
        $warningDiv.find("div#pageWarningText").html(warningText);
        $warningDiv.dialog({
            resizable: false,
            height: "auto",
            width: "auto",
            modal: true,
            buttons: {
                "Leave Page": function () {
                    CullAddress.resetWarningText();
                    $warningDiv.dialog('close');
                },
                "Stay On Page": function () {
                    CullAddress.resetWarningText();
                    $warningDiv.dialog('close');
                    return false;
                }
            },

        });
    }
},

最初はこれは簡単だと思っていましたが、今では少し重くなってきており、正しい方法が何であるかわかりません。fnPreDrawCallback を使用しようとしていますが、最初は jQueryUI ダイアログを作成して表示するつもりでした。コールバックを終了するかどうかをボタンで決定return false;して、ページにとどまるか、ページ/並べ替えを許可します。

javaScript がそのように機能しないことを理解しました。私は次のことをしなければならないと思いますが、その問題を解決する前に、もっと簡潔な (そして再利用可能な) 方法がないか尋ねたいと思います。

  • fnPreDrawCallback で、目的のセット ページ/並べ替えを記述するプロパティを取得します (たとえば、オフセット、pageSize、sSortDir、iSortCol など)。
  • 続行するかページにとどまるかをダイアログで決定する
  • 前述のプロパティを使用して、データ テーブルの GET を作成し、fnPreDrawCallback をバイパスします。

これを必要以上に難しくしていませんか？確かに私はこれをやりたいと思った最初の人ではありませんが、私の人生では、例を見つけることができるか、検索する必要があるキーワードを理解できません...

何か役に立ちますか？

4

1 に答える 1

1

実際の例へのリンク: http://jsfiddle.net/6frQZ/3/

質問へのコメントで既に説明したように、ニーズに合わせて DataTables のデフォルトの動作を回避しようとし、番号付きページネーションと並べ替えを含む、表示する jsFiddleの例を作成しました。

基本的に、次のように、DataTables - プラグインがそのコンポーネントにバインドするイベント ハンドラーをバインド解除する必要があります。

$('.dataTables_paginate a').unbind();
$('.dataTables_wrapper thead th').unbind();

パラメーターなしで使用.unbindすると、要素のイベント リスナーのバインドが解除されるため、これを使用するときは注意してください。

喜んで、DataTables - API は、 fnSort (API-Link)およびfnPageChange (API-Link)という名前の内部ページングおよびソート メソッドを自分で呼び出すことができる関数を提供します。

簡単にするために、confirm- Box を使用してユーザーの操作を求めました。

var userInteraction = confirm("Do you really want to change the page?");

if(userInteraction){
    oTable.fnPageChange(dir);
    $('.dataTables_paginate span a').unbind();
}

"Leave Page"ただし、必要なのは、コードで既に提供した - コールバック内で DataTables 関数を呼び出すことだけです。

注：ページングの番号付きボタンに関しては、ページングが変更されるたびにDataTablesがそれらを再生成するように見えるため、ページが変更されるたびにイベントハンドラーを再度バインド解除する必要があります。

残りは単純ですが、あまり洗練されていないコードで、特定のクラスを探して、どのボタンがクリックされたか、またはソート ヘッダーがどの状態にあるかを知るだけです。

抜粋：

var dir = "",
    $this = $(this);

if($this.hasClass('previous')){
    dir = "previous";
}else if ($this.hasClass('next')){
    dir = "next";
}else if($this.hasClass('first')){
    dir = "first";
}else if($this.hasClass('last')){
    dir = "last";
}else{
    dir = parseInt($this.text(),10)-1;
}
于 2013-03-12T22:19:01.210 に答える