it-swarm.com.de

Seitenwechsel in DataTable erkennen

Mit DataTable kann ich ordnen, auflisten, paginieren, aber ich möchte erkennen, wenn sich die Paginierung ändert. Ich habe die API gesehen, aber die einzige, die ich tun kann, ist die Seite zu wechseln, aber keine Erkennung dieser Wandel.

34
Felix

Sie können fnDrawCallback oder fnInfoCallback verwenden, um Änderungen zu erkennen, wenn Sie auf next klicken, werden beide ausgelöst.

Aber Achtung, Seitenwechsel sind nicht die einzige Quelle, die diese Rückrufe auslösen kann.

37
nimcap

Paging-Ereignisse werden auf diese Weise behandelt. 

 $(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();
} );

auf der offiziellen Website dokumentiert, hier http://www.datatables.net/examples/advanced_init/dt_events.html

Das length.dt -Ereignis wird ausgelöst, wenn die Seitenlänge der Tabelle geändert wird

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

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

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

Weitere Veranstaltungen hier

datatables.net/reference/event/

25
duvanjamid

Wenn Sie eine Version größer als 1.8 haben, können Sie dies verwenden, um die Seitenänderungsereignisse zu treffen:

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

Hoffe das hilft!

UPDATE:

In einigen Kommentaren wurde darauf hingewiesen, dass die Verwendung von .live () anstelle von .on () für sie funktioniert hat. Seien Sie sich dessen bewusst, dass Sie beide ausprobieren sollten und sehen sollten, welches unter Ihren Umständen am besten funktioniert! (Ich glaube, das hat mit Ihrer Version auf jQuery zu tun, aber bitte kommentieren, wenn Sie einen anderen Grund finden!)

17
streetlight

Ich habe es mit:

$('#id-of-table').on('draw.dt', function() {
    // do action here
});
16
Alvin Bakker
$('#tableId').on('draw.dt', function() {
    //This will get called when data table data gets redrawn to the      table.
});
9
Satish Pokala

In meinem Fall hat das Ereignis 'page.dt' den Trick nicht gemacht.

Ich habe stattdessen 'draw.dt' verwendet, und es funktioniert!, Etwas Code:

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

Das Ereignis "Draw.dt" wird jedes Mal ausgelöst, wenn die datierbare Seite durch Suchen, Sortieren oder Seitenwechsel geändert wird.

/ ***** Zusatzinfo ***** /

Es gibt einige Unterschiede in der Art und Weise, wie wir den Ereignis-Listener deklarieren können. Sie können es dem 'Dokument' oder einem 'HTML-Objekt' zuordnen. Die Listener "document" werden immer auf der Seite vorhanden sein und der Listener "html object" ist nur dann vorhanden, wenn das Objekt zum Zeitpunkt der Deklaration im DOM vorhanden ist. Etwas code:

// Dokumentereignis-Listener

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

// HTML-Objektereignis-Listener

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

Das funktioniert gut

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

Verwenden Sie Delegate statt live wie hier:

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

Ein alternativer Ansatz wäre, einen Event-Handler wie folgt auf dem Paginierungslink zu registrieren:

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

Ersetzen Sie natürlich "#dataTableID_" durch die ID Ihrer Tabelle. Ich verwende die ON-Methode von JQuery, da dies die derzeit beste Methode ist.

2
CSSian

Dies funktioniert, wenn ich auf Weiter klicke

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