На этом шаге мы начнем создавать обработчик кнопок выбора страниц.
Данные кнопки должны вызывать изменение переменной 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, получаемое по завершении цикла).
На следующем шаге мы закончим изучение этого вопроса.