Обнаружить изменение страницы в DataTable - PullRequest
35 голосов
/ 13 сентября 2011

С DataTable Я могу заказать, перечислить, сделать нумерацию страниц, но я хочу определить, когда изменяется нумерация страниц, я видел API , но я могу только изменить страницы, но не обнаружить это изменение.

Ответы [ 11 ]

40 голосов
/ 06 марта 2012

Вы можете использовать fnDrawCallback или fnInfoCallback для обнаружения изменений, когда нажата следующая , обе они запускаются.изменения страницы - не единственный источник, который может вызывать эти обратные вызовы.

26 голосов
/ 17 июля 2014

События подкачки обрабатываются таким образом,

 $(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 /

17 голосов
/ 25 января 2016

Я получил его с помощью:

$('#id-of-table').on('draw.dt', function() {
    // do action here
});
16 голосов
/ 03 октября 2012

ЕСЛИ у вас версия больше 1.8, вы можете использовать ее для отображения событий смены страницы:

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

Надеюсь, это поможет!

ОБНОВЛЕНИЕ:

В некоторых комментариях указывалось, что использование .live () вместо .on () сработало для них.Имейте в виду, что вы должны попробовать оба и посмотреть, какой из них лучше всего работает в ваших конкретных обстоятельствах!(Я полагаю, что это может быть связано с вашей версией в jQuery, но, пожалуйста, прокомментируйте, если найдете другую причину!)

9 голосов
/ 16 февраля 2016
$('#tableId').on('draw.dt', function() {
    //This will get called when data table data gets redrawn to the      table.
});
4 голосов
/ 04 июля 2018

В моем случае событие page.dt не сработало.

Вместо этого я использовал событие 'draw.dt', и оно работает !, код:

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

Событие 'Draw.dt' вызывается каждый раз, когда изменяемая страница изменяется при поиске, упорядочении или изменении страницы.

/ ***** Дополнительная информация ***** /

Существуют некоторые различия в том, как мы можем объявить прослушиватель событий. Вы можете присвоить его «документу» или «html-объекту». Слушатели 'document' всегда будут существовать на странице, а слушатель 'html object' будет существовать только в том случае, если объект существует в 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
});
3 голосов
/ 06 января 2014

Альтернативным подходом было бы зарегистрировать обработчик событий в ссылке на нумерацию страниц следующим образом:

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

Замените "#dataTableID_" на идентификатор вашей таблицы, конечно.И я использую метод ON в JQuery, так как в настоящее время это лучшая практика.

2 голосов
/ 14 ноября 2016

Это работает хорошо

$('#id-of-table').on('draw.dt', function() {
    // do action here
});
2 голосов
/ 18 февраля 2014

Попробуйте использовать делегат вместо live, как здесь:

$('#link-wrapper').delegate('a', 'click', function() {
  // do something ..
}
1 голос
/ 19 марта 2018

Это работает для прокрутки, когда я нажимаю "Далее"

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