<div class="pagination"></div>

(function($) {$.fn.pagination = function(options) {const defaults = {current: 1, // 当前页码total: 10, // 总页数visiblePages: 5, // 可见页码数量onPageClick: function(page) {} // 点击页码的回调函数};const settings = $.extend({}, defaults, options);const $pagination = this;const halfVisible = Math.floor(settings.visiblePages / 2);let start = Math.max(1, settings.current - halfVisible);let end = Math.min(settings.total, start + settings.visiblePages - 1);start = Math.max(1, end - settings.visiblePages + 1);const pages = [];for (let i = start; i <= end; i++) {pages.push(i);}const prevClass = settings.current === 1 ? 'disabled' : '';const nextClass = settings.current === settings.total ? 'disabled' : '';const html = `<ul class="pagination"><li class="page-item ${prevClass}"><a class="page-link" href="#" data-page="${settings.current - 1}">上一页</a></li>${pages.map(function(page) {const activeClass = page === settings.current ? 'active' : '';return `<li class="page-item ${activeClass}"><a class="page-link" href="#" data-page="${page}">${page}</a></li>`;}).join('')}<li class="page-item ${nextClass}"><a class="page-link" href="#" data-page="${settings.current + 1}">下一页</a></li></ul>`;$pagination.html(html);$pagination.on('click', 'a', function(event) {event.preventDefault();const page = parseInt($(this).data('page'));if (page >= 1 && page <= settings.total && page !== settings.current) {settings.current = page;$pagination.pagination(settings);settings.onPageClick(page);}});return $pagination;};
})(jQuery);

该代码通过 jQuery 的插件机制，将翻页器封装为一个 jQuery 插件。该插件接收一个对象作为参数，用于配置翻页器的各种属性，包括当前页码、总页数、可见页码数量和点击页码的回调函数。在插件内部，首先通过 Math.max 和 Math.min 方法计算出可见的页码范围，然后使用 map 方法将页码转换为 HTML。最后，将 HTML 插入到翻页器容器中，并使用事件委托为页码绑定点击事件。当点击页码时，插件会更新当前页码，重新绘制翻页器，并调用回调函数通知外部代码页码已经变化。