Шаг 131.
Библиотека jQuery. Работа с таблицами. Разбивка на страницы с помощью JavaScript. Обработка кнопок выбора страниц

    На этом шаге мы начнем создавать обработчик кнопок выбора страниц.

    Данные кнопки должны вызывать изменение переменной currentPage и запускать процедуру перелистывания страниц. На первый взгляд кажется, что мы можем реализовать это, записывая в переменную currentPage значение page, равное текущему номеру итерации, в ходе которой создается очередная кнопка:

 $(document).ready(function() {
   $('table.paginated').each(function() {
     var currentPage = 0;
     var numPerPage = 10;
     var $table = $(this);
     var repaginate = function() {
       $table.find('tbody tr').hide()
         .slice(currentPage * numPerPage,
           (currentPage + 1) * numPerPage)
         .show();
     };
     var numRows = $table.find('tbody tr').length;
     var numPages = Math.ceil(numRows / numPerPage);
     var $pager = $('<div class="pager"></div>');
     for (var page = 0; page < numPages; page++) {
       $('<span class="page-number"></span>').text(page + 1)
         .click (function() {
           currentPage = page;
           repaginate();
         }).appendTo($pager).addClass('clickable');
     }
     $pager.insertBefore($table);
   });
 });

    Эта реализация работает в том смысле, что она вызывает новую функцию repaginate(), когда производится загрузка веб-страницы и когда выполняется щелчок на любой из ссылок. Однако в результате щелчка на любой из ссылок мы будем получать таблицу, в которой отсутствуют строки с данными, как показано на рисунке 1.


Рис.1. После щелчка на любой из ссылок отображается пустая таблица

    Проблема заключается в том, что при определении обработчика click создается замыкание. Обработчик события click ссылается на переменную page, которая определена за пределами функции. Когда на следующей итерации происходит изменение значения переменной, это оказывает воздействие и на обработчики события click, определенные ранее. В результате для элемента выбора из 7 страниц каждая кнопка будет ссылаться на страницу с номером 8 (последнее значение переменной page, получаемое по завершении цикла).

    На следующем шаге мы закончим изучение этого вопроса.




Предыдущий шаг Содержание Следующий шаг