web-dev-qa-db-ja.com

DataTableのページ変更を検出する

DataTable を使用して、ページ付けを注文、一覧表示、実行できますが、ページ付けが変更されたことを検出したい場合、 [〜＃〜] api [〜＃〜] しかし、私ができるのはページを変更するだけですが、この変更を検出することはできません。

jquerypaginationdatatables
35
Felix

fnDrawCallback または fnInfoCallback を使用して、nextの場合に変更を検出できます。両方をクリックすると、両方が発生します。

ただし、これらのコールバックを起動できるソースはページの変更だけではないことに注意してください。

40
nimcap

ページングイベントはこの方法で処理され、

 $(document).ready(function() {

    $('#example')
        .on( 'order.dt',  function () { console.log('Order' ); } )
        .on( 'search.dt', function () {console.log('Search' ); } )
        .on( 'page.dt',   function () { console.log('Page' ); } )
        .dataTable();
} );

公式ウェブサイトに文書化されています http://www.datatables.net/examples/advanced_init/dt_events.html

Length.dtイベントは、テーブルのページの長さが変更されるたびに発生します

$('#example').dataTable();

$('#example').on( 'length.dt', function ( e, settings, len ) {
    console.log( 'New page length: '+len );
} );

http://datatables.net/reference/event/length

その他のイベントはこちら

datatables.net/reference/event/

28
duvanjamid

私はそれを使って動作させました：

$('#id-of-table').on('draw.dt', function() {
    // do action here
});
17
Alvin Bakker

バージョンが1.8よりも大きい場合、これを使用してページ変更イベントをヒットできます。

    $('#myTable').on('page', function () {...} );

お役に立てれば！

更新：

.on（）の代わりに.live（）を使用すると効果的であると指摘するコメントもあります。両方を試して、特定の状況でどちらが最適かを確認する必要があることに注意してください！ （これはjQueryのバージョンに関係していると思われますが、別の理由が見つかった場合はコメントしてください！）

16
streetlight
$('#tableId').on('draw.dt', function() {
    //This will get called when data table data gets redrawn to the      table.
});
9
Satish Pokala

私の場合、「page.dt」イベントはトリックを行いませんでした。

代わりに「draw.dt」イベントを使用しましたが、動作します！

$(document).on('draw.dt', function () {
    //Do something
});

「Draw.dt」イベントは、検索、順序付け、またはページ変更によってデータテーブルページが変更されるたびに発生します。

/ *****追加情報***** /

イベントリスナーを宣言する方法にはいくつかの違いがあります。 「ドキュメント」または「htmlオブジェクト」に割り当てることができます。 「ドキュメント」リスナーは常にページに存在し、「htmlオブジェクト」リスナーは、宣言の時点でオブジェクトがDOMに存在する場合にのみ存在します。いくつかのコード：

//ドキュメントイベントリスナー

$(document).on('draw.dt', function () {
    //This will also work with objects loaded by ajax calls
});

// HTMLオブジェクトイベントリスナー

$("#some-id").on('draw.dt', function () {
    //This will work with existing objects only
});
4
César León

別の方法は、次のようにページネーションリンクにイベントハンドラーを登録することです。

$("#dataTableID_paginate").on("click", "a", function() { alert("clicked") });

もちろん、「＃dataTableID_」をテーブルのIDに置き換えます。そして、現在のベストプラクティスであるJQueryのONメソッドを使用しています。

3
CSSian

これでいい

$('#id-of-table').on('draw.dt', function() {
    // do action here
});
2
Kemal Cankurt

こちらのようにライブではなくデリゲートを使用してみてください：

$('#link-wrapper').delegate('a', 'click', function() {
  // do something ..
}
2
nirmallimbu

これは、次にクリックするとスクロールするように機能します

$('#myTable').on('draw.dt', function() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
});
1
hanna jebesa