it-swarm.it

Rileva il cambio di pagina su DataTable

Con DataTable Posso ordinare, elencare, fare l'impaginazione ma voglio rilevare quando cambia l'impaginazione, ho visto il API ma l'unico che posso fare è cambiare la pagina ma non rilevare questo cambiamento.

34
Felix

È possibile utilizzare fnDrawCallback o fnInfoCallback per rilevare le modifiche, quando viene cliccato next vengono attivati ​​entrambi.

Ma attenzione, le modifiche alle pagine non sono l'unica fonte in grado di attivare quelle richiamate.

37
nimcap

Gli eventi di paging vengono gestiti in questo modo, 

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

documentato nel sito ufficiale, qui http://www.datatables.net/examples/advanced_init/dt_events.html

L'evento length.dt viene generato ogni volta che viene modificata la lunghezza della pagina della tabella

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

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

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

Altri eventi qui

datatables.net/reference/event/

25
duvanjamid

Se hai una versione superiore a 1,8, puoi usarla per colpire gli eventi di cambio pagina:

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

Spero che questo ti aiuti!

AGGIORNARE:

Alcuni commenti hanno evidenziato che l'uso di .live () invece di .on () ha funzionato per loro. Siate consapevoli di ciò, dovreste provare entrambi e vedere quale funziona meglio nella vostra particolare circostanza! (Credo che questo possa avere a che fare con la tua versione su jQuery, ma per favore commenta se trovi un'altra ragione!)

17
streetlight

L'ho fatto funzionare usando:

$('#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

Nel mio caso, l'evento "page.dt" non ha funzionato.

Ho usato l'evento 'draw.dt' invece, e funziona !, un po 'di codice:

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

L'evento 'Draw.dt' viene attivato ogni volta che la pagina databile cambia cambiando, ordinando o cambiando pagina.

/ ***** Informazioni adizionali ***** /

Ci sono alcune differenze nel modo in cui possiamo dichiarare il listener di eventi. Puoi assegnarlo al 'documento' o ad un 'oggetto html'. I listener 'document' saranno sempre presenti nella pagina e il listener 'html object' esisterà solo se l'oggetto esiste nel DOM al momento della dichiarazione. Qualche codice:

// Document listener di eventi

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

// Listener di eventi dell'oggetto HTML

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

Questo funziona bene

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

Prova a utilizzare delegato invece di vivere come qui:

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

Un approccio alternativo sarebbe quello di registrare un gestore di eventi sul link di paginazione in questo modo:

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

Sostituisci "#dataTableID_" con l'ID della tua tabella, ovviamente. E sto usando il metodo ON di JQuery in quanto è la migliore pratica corrente.

2
CSSian