web-dev-qa-db-fra.com

Détecter le changement de page sur DataTable

Avec DataTable Je peux commander, lister, faire de la pagination mais je veux détecter quand la pagination change, j'ai vu le API mais je ne peux changer que la page, mais pas détecter Ce changement.

jquerypaginationdatatables
34
Felix

Vous pouvez utiliser fnDrawCallback ou fnInfoCallback pour détecter les modifications, lorsque vous cliquez sur next, les deux sont déclenchés.

Mais attention, les changements de page ne sont pas la seule source pouvant déclencher ces rappels.

37
nimcap

Les événements de pagination sont traités de cette manière, 

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

documenté sur le site officiel, ici http://www.datatables.net/examples/advanced_init/dt_events.html

L'événement length.dt est déclenché chaque fois que la longueur de la page de la table est modifiée

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

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

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

Plus d'événements ici

datatables.net/reference/event/

25
duvanjamid

Si vous avez une version supérieure à 1.8, vous pouvez l'utiliser pour accéder aux événements de changement de page:

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

J'espère que cela t'aides!

METTRE À JOUR:

Certains commentaires ont souligné que l'utilisation de .live () au lieu de .on () fonctionnait pour eux. Sachez que vous devriez essayer les deux et voir lequel fonctionne le mieux dans votre cas particulier! (Je pense que cela peut avoir à voir avec votre version sur jQuery, mais veuillez commenter si vous trouvez une autre raison!)

17
streetlight

Je l'ai eu en utilisant:

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

Dans mon cas, l'événement 'page.dt' n'a pas fait l'affaire.

J'ai utilisé l'événement 'draw.dt' à la place, et cela fonctionne !, un code:

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

L'événement 'Draw.dt' est déclenché chaque fois que la page pouvant être datée est modifiée en effectuant une recherche, un classement ou une modification de page.

/ ***** Informations additionnelles ***** /

Il y a quelques différences dans la façon dont nous pouvons déclarer l'écouteur d'événement. Vous pouvez l'associer au "document" ou à un "objet html". Les écouteurs "document" existeront toujours dans la page et l'écouteur "objet HTML" n'existera que si l'objet existe dans le DOM au moment de la déclaration. Un code:

// écouteur d'événement de document

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

// écouteur d'événements d'objets HTML

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

Ça marche bien

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

Essayez d’utiliser delegate au lieu de vivre comme ici:

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

Une autre approche consisterait à inscrire un gestionnaire d’événements sur le lien de pagination de la manière suivante:

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

Remplacez "#dataTableID_" par l'ID de votre table, bien sûr. Et j'utilise la méthode ON de JQuery car c'est la meilleure pratique actuelle.

2
CSSian

Cela fonctionne de moi pour faire défiler quand je clique sur suivant

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